/* ══════════════════════════════════════════════════════════════
   SERES · base.css  (10 sep 2026)
   EL DISEÑO, UNA SOLA VEZ. Lo cargan las 27 herramientas antes de su
   propio <style>. Sale del tracker, que es el canon.
   Trae: tokens (con los dos juegos de nombres que conviven en el
   ecosistema) · resets del sistema (botones, campos) · menú lateral ·
   chip de perfil · botones · cards · campos · segmentos · cifras ·
   modal · velo · perfil · versiones. Cada herramienta puede pisar lo
   que necesite con su propio CSS, porque carga después.
   Dani, 10 sep: "deberían ser todas iguales, tener un archivo de diseño".
   ══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
      --bg:          #000000;
      --surface:     #0d0d0f;
      --surface-2:   #141417;
      --line:        #1f1f23;
      --line-soft:   #18181b;
      --text:        #f5f5f4;
      --text-dim:    #a1a1aa;
      --text-mute:   #6b6b70;
      --accent:      #6e1d3a;
      --accent-soft: #8e2d4e;
      --accent-deep: #50122e;
      --accent-glow: rgba(110, 29, 58, 0.22);

      --font-display: 'Instrument Serif', Georgia, serif;
      --font-body:    'Inter', system-ui, -apple-system, sans-serif;
      --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

      --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
      --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
      --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
      --shadow-1: 0 1px 2px rgba(0,0,0,.6);
      --shadow-2: 0 8px 30px rgba(0,0,0,.5);
      --ease: cubic-bezier(.22, 1, .36, 1);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --dur: .45s;
      --menu-w: 262px;

      /* puentes con los nombres que ya usaba el archivo */
      --negro:          var(--bg);
      --negro-card:     var(--surface);
      --negro-hover:    var(--surface-2);
      --bordo:          var(--accent);
      --bordo-mid:      var(--accent-soft);
      --bordo-dim:      var(--accent-glow);
      --bordo-glow:     var(--accent-glow);
      --gris-claro:     var(--surface-2);
      --gris-medio:     var(--text-mute);
      --gris-borde:     var(--line);
      --gris-oscuro:    var(--line);
      --text-primary:   var(--text);
      --text-secondary: var(--text-dim);
      --font:           var(--font-body);
    }

/* ── Los mismos tokens con los OTROS nombres que usan Memento, Guerrero,
      Monje, Espejo y las páginas de la web. Así cualquier CSS de cualquier
      época encuentra sus variables. ── */
:root{
  --tinta:var(--text); --tenue:var(--text-dim); --tenue2:var(--text-mute);
  --sup1:var(--surface); --sup2:var(--surface-2);
  --linea:var(--line); --linea-fuerte:rgba(245,245,244,.18);
  --serif:var(--font-display); --sans:var(--font-body); --mono:var(--font-mono);
  --r:14px; --r-sm:10px; --glow:var(--accent-glow);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ── RESET DEL SISTEMA: nada blanco por defecto ── */
button, input[type="button"], input[type="submit"]{ -webkit-appearance:none; appearance:none; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select{
  -webkit-appearance:none; appearance:none; color-scheme:dark; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* ── COMPONENTES ── */
/* ── Card ── */ .card{background: var(--negro-card); border-radius: 12px; padding: 22px; border: 1px solid var(--gris-borde);}
.card-title{font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-secondary); margin-bottom: 18px;}
.vista__enc .eyebrow{display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px;}
/* los rótulos: mono, versalitas, muy espaciados */ .kpi-label, .card-title, .mc-name, .donut-sub, .month-label, .insight-tag, .hg-week-title, .mg-popup-title, .hg-day-letter, .hg-prog-label{font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .24em; color: var(--text-mute);}
.card-title{font-size: .6rem; margin-bottom: var(--s-5);}
/* forma: los radios y los bordes del canon */ .card, .kpi-card, .insight{border-radius: var(--r-lg); border-color: var(--line);}
/* ═══ DATOS ═══ */ .rbtn{display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: .86rem; font-weight: 400; line-height: 1; padding: var(--s-3) var(--s-5); border-radius: var(--r-full); border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);}
.rbtn:hover{border-color: var(--accent-soft);}
.rbtn--primary{background: var(--accent); border-color: var(--accent); color: #fff;}
.rbtn--primary:hover{background: var(--accent-soft); border-color: var(--accent-soft);}
.datos-acciones{display: flex; flex-wrap: wrap; gap: var(--s-3);}
.datos-nota{font-size: .84rem; color: var(--text-dim); margin-bottom: var(--s-4); line-height: 1.6;}
.aviso{position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 14px); z-index: 1200; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: var(--s-3) var(--s-5); font-size: .84rem; color: var(--text); box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease-out);}
.aviso[data-visible="si"]{opacity: 1; transform: translate(-50%, 0);}
[data-theme="claro"] .sh-velo{background: rgba(0,0,0,.35);}
/* ═══ Perfil ═══ */ .perfil-chip{display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--r-md); padding: var(--s-3); cursor: pointer; margin-bottom: var(--s-3); color: var(--text-dim); transition: background .2s var(--ease), color .2s var(--ease);}
.perfil-chip:hover{background: var(--surface-2); color: var(--text);}
.perfil-chip{box-shadow: inset 2px 0 0 var(--accent);}
.perfil-chip[aria-current="page"]{color: var(--text); background: var(--surface-2);}
.perfil-chip__circulo{width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase;}
.perfil-chip__datos{display: flex; flex-direction: column; align-items: flex-start; min-width: 0;}
.perfil-chip__nombre{font-family: var(--font-body); font-weight: 300; font-size: .9rem; color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.perfil-chip__sub{font-family: var(--font-mono); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute);}
.perfil-cabecera{display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-6);}
.perfil-avatar{width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 1.5rem; text-transform: uppercase;}
.perfil-hola{font-family: var(--font-display); font-style: italic; font-size: 1.7rem; color: var(--text); line-height: 1.1;}
.perfil-desde{font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin-top: 6px;}
/* ═══ Diálogo de confirmación ═══ */ .modal{position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);}
[data-theme="claro"] .modal{background: rgba(0,0,0,.35);}
.modal[data-abierto="si"]{opacity: 1; pointer-events: auto;}
.modal__caja{background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); max-width: 420px; width: 100%; box-shadow: var(--shadow-2); transform: translateY(10px); transition: transform .25s var(--ease-out);}
.modal[data-abierto="si"] .modal__caja{transform: none;}
.modal__titulo{font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--text); margin-bottom: var(--s-3);}
.modal__texto{font-size: .9rem; color: var(--text-dim); line-height: 1.6; margin-bottom: var(--s-6);}
.modal__acciones{display: flex; gap: var(--s-3); justify-content: flex-end;}
.rbtn--peligro{background: var(--accent); border-color: var(--accent); color: #fff;}
.rbtn--peligro:hover{background: var(--accent-soft); border-color: var(--accent-soft);}
/* ═══ Configuración ═══ */ .segmento{display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px; gap: 3px;}
.segmento button{border: 0; background: transparent; cursor: pointer; color: var(--text-dim); font-family: var(--font-body); font-size: .86rem; font-weight: 300; padding: var(--s-2) var(--s-5); border-radius: var(--r-full); transition: background .25s var(--ease), color .25s var(--ease);}
.segmento button:hover{color: var(--text);}
.segmento button[aria-pressed="true"]{background: var(--accent); color: #fff;}
.leyenda .pt{width: 7px; height: 7px; border-radius: 50%; display: block;}
.leyenda .pt[data-racha="0"]{background: var(--line);}
.leyenda .pt[data-racha="2"]{background: var(--accent-deep);}
.leyenda .pt[data-racha="5"]{background: var(--accent);}
.leyenda .pt[data-racha="9"]{background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow);}
.vista > .card + .card, .vista > .kpi-grid + .insight, .vista > .insight + .vista__par{margin-top: 16px;}
.vista[data-vista="hoy"] > .card + .card{margin-top: 28px;}
.sh-nav button{display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left; padding: var(--s-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-dim); cursor: pointer; font-family: var(--font-body); font-size: .94rem; font-weight: 300; transition: background .2s var(--ease), color .2s var(--ease);}
.sh-nav button:hover{background: var(--surface-2); color: var(--text);}
.sh-nav button[aria-current="page"]{color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent);}
/* ═══ MENÚ AL CANON ═══ Un punto único que solo cambia de intensidad al estar activo, en lugar de un glifo distinto por ítem. Mismo criterio que el mapa de días y el punto de racha: una forma, distinta intensidad según estado. */ .sh-nav button{letter-spacing: .03em; text-transform: uppercase; font-size: .82rem; font-weight: 500; touch-action: manipulation;}
.sh-nav__pt{width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex: 0 0 auto;}
.sh-nav button[aria-current="page"] .sh-nav__pt{background: var(--accent-soft); opacity: 1;}
/* ═══ ARRASTRE PARA REORDENAR ═══ El umbral de 400ms evita que el gesto se pelee con el scroll del cajón: antes de cumplirse, el dedo desplaza normal. */ .sh-nav__asa{width: 13px; flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; gap: 2.5px; align-items: center; opacity: .38;}
.sh-nav__asa i{display: block; width: 11px; height: 1.2px; background: currentColor;}
body[data-arrastrando="si"] .sh-nav{overflow: hidden; touch-action: none;}
body[data-arrastrando="si"] .sh-nav button{transition: transform .22s var(--ease);}
.sh-nav button[data-agarrado="si"]{background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent-soft), 0 8px 24px rgba(0,0,0,.45); transform: scale(1.03); position: relative; z-index: 3; transition: none;}
/* ═══ MENÚ LATERAL ═══ */ .sh-menu-btn{width: 40px; height: 40px; flex: 0 0 auto; display: block; padding: 10.5px 0; background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-dim); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);}
.sh-menu-btn:hover{border-color: var(--accent); color: var(--text);}
.sh-menu-btn svg{width: 17px; height: 17px; display: block; margin: 0 auto;}
.sh-velo{position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);}
.sh-velo[data-abierto="si"]{opacity: 1; pointer-events: auto;}
.sh-menu{position: fixed; top: 0; left: 0; bottom: 0; z-index: 950; width: var(--menu-w); max-width: 84vw; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; padding: calc(var(--s-5) + env(safe-area-inset-top)) var(--s-4) var(--s-5); transform: translateX(-100%); transition: transform var(--dur) var(--ease-out);}
.sh-menu[data-abierto="si"]{transform: translateX(0);}
.sh-menu__marca{display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6);}
.sh-menu__marca img{height: 22px; width: auto; display: block;}
.sh-menu__marca{min-height: 22px;}
.sh-menu__eti{font-family: var(--font-mono); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute);}
.sh-nav{display: flex; flex-direction: column; gap: 2px;}
.sh-nav a{display: flex; align-items: center; gap: var(--s-3); text-decoration: none; padding: var(--s-3); border-radius: var(--r-md); color: var(--text-dim); font-family: var(--font-body); font-size: .94rem; font-weight: 300; transition: background .2s var(--ease), color .2s var(--ease);}
.sh-nav a:hover{background: var(--surface-2); color: var(--text);}
.sh-nav a[aria-current="true"]{color: var(--text); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent);}
.sh-menu__pie{margin-top: auto; padding-top: var(--s-6);}
.sh-menu__regla{border: 0; border-top: 1px solid var(--line-soft); margin: 0 0 var(--s-4);}
.sh-version{font-family: var(--font-mono); font-size: .56rem; letter-spacing: .16em; color: var(--text-mute);}
.sh-menu{transform: none;}
.sh-velo{display: none;}
.sh-menu-btn{display: none;}
.card{padding: 14px 13px; border-radius: 10px;}
/* ═══ OBJETIVOS DEL PERFIL ═══ */ .obj{margin-bottom:16px;}
.obj:last-child{margin-bottom:0;}
.obj__cab{display:flex; align-items:baseline; gap:9px; margin-bottom:7px; flex-wrap:wrap;}
.obj__n{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text);}
.obj__p{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; color:var(--accent-soft);}
textarea.obj__in{width:100%; min-height:54px; resize:vertical; line-height:1.55; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px; color:var(--text); font-family:inherit; font-size:.95rem; transition:border-color .2s var(--ease);}
textarea.obj__in:focus{border-color:var(--accent-soft); outline:none;}
.obj__fijado{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line-soft);}
.obj__texto{font-size:.94rem; line-height:1.5; color:var(--text-primary); white-space:pre-wrap; flex:1;}
.obj__lapiz{flex-shrink:0; background:none; border:0; cursor:pointer; color:var(--text-secondary); font-size:.9rem; padding:2px 6px; border-radius:var(--r-sm); transition:color .2s var(--ease); line-height:1.4;}
.obj__lapiz:hover{color:var(--accent-soft);}
.obj__ok{font-family:var(--font-mono); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); opacity:0; transition:opacity .3s var(--ease); pointer-events:none;}
.obj__ok[data-visible="si"]{opacity:1;}
/* ═══ TU PRÁCTICA EN NÚMEROS ═══ Filas de dato con la cifra en serif. El modelo es el de UCDM. */ .cifras{display:grid; gap:1px; background:var(--line); border-radius:var(--r-lg); overflow:hidden;}
.cifra{display:flex; align-items:baseline; justify-content:space-between; gap:13px; background:var(--surface); padding:14px 17px;}
.ver-fila{display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft);}
.ver-datos{min-width: 0;}
.ver-fecha{font-size: .9rem; color: var(--text);}
.ver-detalle{font-family: var(--font-mono,'Geist Mono',monospace); font-size: .68rem; color: var(--text-mute); letter-spacing: .04em; margin-top: 2px;}
.ver-vacio{padding: var(--s-3) 0; color: var(--text-mute); font-size: .88rem;}
.modal .rbtn, .modal__acciones .rbtn{-webkit-appearance:none; appearance:none; background:transparent; color:var(--text,#f5f5f4); border:1px solid var(--line,#1f1f23);}
.modal .rbtn--peligro, .modal .rbtn--primary{background:var(--accent,#6e1d3a); border-color:var(--accent,#6e1d3a); color:#fff;}

/* ── media ── */
@media (min-width: 900px) { .sh-menu { transform: none; } .sh-velo { display: none; } .sh-menu-btn { display: none; } body { padding-left: calc(var(--menu-w) + 32px); } }
@media (max-width: 768px) { body { padding: 12px 12px env(safe-area-inset-bottom, 20px); } .header { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; } .header-left { flex: 1; min-width: 0; gap: 10px; } .logo img { height: 22px; } .month-nav { padding: 7px 12px; gap: 8px; flex-shrink: 0; } .month-nav button { font-size: 18px; padding: 0; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; } .month-label { font-size: 11px; min-width: 80px; } .kpi-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; } .kpi-card { padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items: start; column-gap: 14px; -webkit-tap-highlight-color: transparent; } .kpi-card:hover { transform: none; box-shadow: none; } .kpi-card:active { opacity: .85; } .kpi-label { grid-column: 1; grid-row: 1; margin-bottom: 4px; } .kpi-value { grid-column: 2; grid-row: 1 / 3; font-size: 34px; align-self: center; } .kpi-sub { grid-column: 1; grid-row: 2; } .kpi-bar { grid-column: 1 / 3; grid-row: 3; margin-top: 10px; } .insight { padding: 13px 15px; gap: 11px; margin-bottom: 12px; } .insight-text { font-size: 12px; } .card { padding: 14px 13px; border-radius: 10px; } .main-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } .charts-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } .hg-names { display: none; } .hg-week-inner { display: flex; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hg-week-names { display: flex; flex-direction: column; flex-shrink: 0; width: 72px; gap: 2px; } .hg-cell { width: 26px; height: 26px; border-radius: 5px; } .hg-cell.done:hover { background: var(--bordo); transform: none; } .hg-cell.undone:hover { background: var(--gris-borde); transform: none; } .hg-cell:active { transform: scale(0.85); opacity: .75; } .hg-week-grid { grid-template-columns: repeat(var(--wcols,8), 26px); gap: 2px; } .hg-day-num { height: 36px; } .hg-day-letter { font-size: 7px; } .hg-day-number { font-size: 9px; } .hg-wk-spacer { display: none; } .hg-dn-spacer { height: 34px; } .hg-habit-name { font-size: 9px; height: 26px; gap: 2px; padding-right: 3px; box-sizing: border-box; } .hg-habit-icon { font-size: 11px; } .hg-edit-icon { display: none; } .hg-prog-cell { height: 11px; margin-top: 3px; } .hg-prog-label { height: 11px; margin-top: 3px; font-size: 8px; } .hg-prog-bar { width: 22px; height: 3px; } .hg-dots { display: none; } .hg-habit-input { font-size: 16px; height: 24px; } #mentalGrid { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mental-grid { grid-template-columns: 72px repeat(var(--mdays,30), 26px); gap: 3px; } .mg-cell { width: 26px; height: 26px; border-radius: 5px; font-size: 10px; } .mg-label { height: 26px; font-size: 10px; } .mg-popup { min-width: 210px; padding: 16px; } .mg-popup-btns button { width: 36px; height: 36px; font-size: 13px; } .donut-wrap { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; align-items: flex-start; } .donut-canvas-wrap { width: 140px; height: 140px; } .donut-pct { font-size: 26px; } .hb-bar { width: 80px; } .hb-name { font-size: 12px; } .annual-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; } .month-card { padding: 9px 6px; border-radius: 8px; } .mc-pct { font-size: 13px; } .mc-name { font-size: 8px; } #tooltip { display: none !important; } }

/* ── animaciones ── */
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes splashSeresIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes splashSeresLinea{to{width:72px}}

/* ══════════════════════════════════════════════════════════════
   RITMO VERTICAL (11 sep 2026)
   Dani: "algunos botones quedan muy justos con los cuadros de texto".
   Pasaba porque cada bloque traía su propio margin pegado en el código.
   Acá se define UNA vez, por relación entre elementos, no por caso.
   ══════════════════════════════════════════════════════════════ */

/* un campo seguido de un botón: aire suficiente para no tocarse */
.campo + .rbtn, .campo + button, input + .rbtn, textarea + .rbtn,
input + button:not(.cas__b), textarea + button:not(.cas__b),
select + .rbtn, .campo__in + .rbtn { margin-top: 12px; }

/* filas de campo + botón: que respiren entre sí */
.fila2, .fila3 { gap: 10px; }
.fila2 > .rbtn, .fila3 > .rbtn { align-self: stretch; }

/* el botón Guardar del archivo compartido */
.seres-guardar-btn { margin-top: 12px !important; }

/* dentro de una card, todo lo que se apila lleva el mismo aire */
.card > * + * { margin-top: 12px; }
.card > .campo__e + *, .card > .card-title + * { margin-top: 10px; }
.card p + .rbtn, .card p + .datos-acciones { margin-top: 14px; }

/* los grupos de acciones nunca pegados al texto de arriba */
.datos-acciones { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }

/* la etiqueta de sección respira de lo que viene antes */
.seccion, .campo__e { margin-top: 0; }
.card + .seccion, div + .seccion { margin-top: 22px; }

/* ── LO QUE VA SUELTO DENTRO DE UNA VISTA ──
   Un botón o un bloque entre dos cards no tenía margen propio y quedaba
   pegado al de abajo ("Anotar una creencia" en el Auditor, 11 sep).
   El ritmo se define a nivel de vista: todo hermano lleva su aire. */
.vista > * + *, [data-vista] > * + *, .pantalla > * + * { margin-top: 14px; }
.vista > .card, [data-vista] > .card { margin-bottom: 0; }
.vista > .rbtn, [data-vista] > .rbtn,
.vista > button, [data-vista] > button { margin-top: 18px; margin-bottom: 18px; }
.vista > .rbtn + .card, [data-vista] > .rbtn + .card,
.vista > button + .card, [data-vista] > button + .card { margin-top: 0; }
/* dos cards seguidas */
.card + .card { margin-top: 14px; }