/* ============================================================
   Fichas — estética de principios de los 2000: ventanas con barra de
   título, botones biselados, Tahoma y barras de progreso segmentadas.

   Sigue sin haber un solo recurso externo: las fuentes son las del
   sistema, los degradados y biseles son CSS, y los iconos un sprite SVG
   inline. Los nombres de clase son los mismos que usan el JS y las
   plantillas — esto es un cambio de piel, no de estructura.

   Tema claro a propósito, sin variante oscura: en 2003 no existía.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
:root{
  /* azules del escritorio de la época */
  --azul:#2a5db0; --azul-osc:#153a7a; --azul-claro:#7ba7e8;
  --barra-1:#4d8bdd; --barra-2:#1b4ea8;
  --escritorio-1:#5d8fc9; --escritorio-2:#2c5c96;

  --ventana:#ffffff; --panel:#f1f2f6; --panel-2:#e4e7ef;
  --linea:#8ba0bd; --linea-suave:#c3cddd;
  --txt:#0d1b2a; --txt-dim:#4d5f78;

  --ok:#3a9a2e; --ok-2:#7ed36a; --warn:#e79b25; --bad:#c1272d;
  --resalte:#fffbe6;
  --radius:5px; --pad:14px;
  --safe-b:env(safe-area-inset-bottom,0px);

  /* biseles: luz arriba, sombra abajo. Es todo el truco de la época. */
  --bisel:inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(0,0,0,.13);
  --bisel-hundido:inset 1px 1px 2px rgba(0,0,0,.28), inset -1px -1px 0 rgba(255,255,255,.6);
}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;color:var(--txt);
  background:var(--escritorio-2);
  background-image:linear-gradient(180deg,var(--escritorio-1) 0%,var(--escritorio-2) 100%);
  background-attachment:fixed;
  font:14px/1.5 Tahoma,Verdana,Geneva,"DejaVu Sans",sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:contain;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3{margin:0;font-weight:700}
a{color:var(--azul)}
a:hover{color:var(--azul-osc)}

/* ============ la ventana ============ */
.app{
  max-width:720px;margin:0 auto;min-height:100dvh;
  background:var(--ventana);
  border-left:1px solid var(--azul-osc);border-right:1px solid var(--azul-osc);
  box-shadow:0 0 14px rgba(0,0,0,.35);
  padding:0 var(--pad) calc(96px + var(--safe-b));
}
@media (min-width:760px){
  .app{margin:14px auto;min-height:calc(100dvh - 28px);border:1px solid var(--azul-osc);border-radius:var(--radius)}
}

/* barra de título */
header.top{
  position:sticky;top:0;z-index:20;
  margin:0 calc(var(--pad) * -1) 14px;padding:5px 8px;
  display:flex;align-items:center;gap:6px;min-height:44px;
  background:linear-gradient(180deg,var(--barra-1) 0%,var(--barra-2) 55%,#123f8c 100%);
  border-bottom:1px solid #0d2f6b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  color:#fff;
}
header.top h1{
  font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-shadow:1px 1px 1px rgba(0,0,0,.45);letter-spacing:.2px;
}
.icon{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* botones de la barra de título: cuadraditos con bisel, como los de cerrar/minimizar */
.iconbtn{
  display:grid;place-items:center;width:34px;height:32px;flex:0 0 auto;color:#fff;
  border:1px solid rgba(255,255,255,.55);border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.iconbtn:hover{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16))}
.iconbtn:active{background:rgba(0,0,0,.16);box-shadow:var(--bisel-hundido)}

.screen{display:none}
.screen.on{display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ piezas ============ */
.card{
  background:var(--panel);border:1px solid var(--linea);border-radius:3px;
  box-shadow:var(--bisel);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 14px;min-height:44px;font-weight:700;font-size:14px;
  color:var(--txt);border:1px solid var(--linea);border-radius:3px;
  background:linear-gradient(180deg,#ffffff 0%,#eceef4 48%,#dde1ea 52%,#d2d7e2 100%);
  box-shadow:var(--bisel);
}
.btn:hover{background:linear-gradient(180deg,#ffffff 0%,#f4f6fb 48%,#e6eaf3 52%,#dbe0ec 100%);border-color:var(--azul)}
.btn:active{
  background:linear-gradient(180deg,#c9cfdc 0%,#dfe3ec 100%);
  box-shadow:var(--bisel-hundido);transform:translateY(1px);
}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:var(--bisel)}
.btn:focus-visible,.iconbtn:focus-visible{outline:2px solid var(--azul-osc);outline-offset:1px}
/* el botón "importante": azul lustroso, con el brillo arriba */
.btn.primary{
  color:#fff;border-color:#123f8c;text-shadow:0 1px 1px rgba(0,0,0,.4);
  background:linear-gradient(180deg,#7fb2f0 0%,#3a76d1 48%,#245cb4 52%,#1b4796 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2);
}
.btn.primary:hover{background:linear-gradient(180deg,#96c2f5 0%,#4a85dd 48%,#2b68c2 52%,#2050a4 100%)}
.btn.primary:active{background:linear-gradient(180deg,#1b4796 0%,#3a76d1 100%);box-shadow:var(--bisel-hundido)}
.btn.ghost{background:linear-gradient(180deg,#fafbfd,#eaedf4)}
.btn.danger{color:var(--bad)}
.btn.wide{width:100%}
.row{display:flex;gap:8px}
.row.wrap{flex-wrap:wrap}

label.field{display:block;margin-bottom:12px}
label.field > span{display:block;font-size:12px;font-weight:700;color:var(--txt-dim);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;padding:9px 10px;background:#fff;
  border:1px solid #7f9db9;border-radius:2px;outline:none;
  box-shadow:var(--bisel-hundido);
}
input:focus,textarea:focus,select:focus{border-color:var(--azul);background:var(--resalte)}
textarea{resize:vertical;min-height:84px;font-family:inherit}
.muted{color:var(--txt-dim)}
.small{font-size:12.5px}
.empty{
  text-align:center;padding:34px 16px;color:var(--txt-dim);
  border:2px dashed var(--linea-suave);border-radius:4px;background:#fafbfe;
}
.empty .icon{width:40px;height:40px;margin:0 auto 12px;stroke-width:1.6;color:var(--azul-claro)}

/* ============ lista de mazos ============ */
#resumen{
  padding:7px 10px;margin-bottom:12px;border:1px solid var(--linea-suave);
  border-radius:3px;background:var(--resalte);color:#6b5a1e;font-weight:700;
}
#resumen:empty{display:none}
.decks{display:grid;gap:9px;margin-bottom:14px}
.deck{
  display:flex;align-items:center;gap:11px;padding:11px;width:100%;text-align:left;
  background:linear-gradient(180deg,#ffffff,#eef1f7);
  border:1px solid var(--linea);border-radius:3px;box-shadow:var(--bisel);
}
.deck:hover{border-color:var(--azul);background:linear-gradient(180deg,#ffffff,#e2ecfb)}
.deck:active{box-shadow:var(--bisel-hundido)}
.deck .body{display:block;flex:1;min-width:0}
.deck .name{display:block;font-weight:700;color:var(--azul-osc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck .meta{display:block;font-size:12px;color:var(--txt-dim);margin-top:1px}
/* el contador, como los globitos de notificación de la época */
.pill{
  flex:0 0 auto;min-width:30px;height:24px;padding:0 8px;border-radius:12px;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#ff8a6a,#c1272d);
  border:1px solid #8d1a1f;text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.pill.zero{
  background:linear-gradient(180deg,#f2f4f8,#d8dde7);color:var(--txt-dim);
  border-color:var(--linea);text-shadow:none;
}
/* barra de progreso segmentada, la clásica de bloquecitos verdes */
.bar{
  display:block;height:14px;border:1px solid #7f9db9;border-radius:2px;background:#fff;
  overflow:hidden;margin-top:7px;box-shadow:var(--bisel-hundido);padding:1px;
}
.bar > i{
  display:block;height:100%;border-radius:1px;
  /* las rayas van PRIMERO: la primera capa es la de arriba, y al revés el
     verde tapaba los cortes y la barra quedaba lisa. */
  background-image:
    linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.9) 8px 11px),
    linear-gradient(180deg,var(--ok-2) 0%,var(--ok) 55%,#2f7d25 100%);
  background-size:11px 100%,100% 100%;
  transition:width .25s;
}

/* ============ fichas del mazo ============ */
#mazo-stats{padding:10px 12px;margin-bottom:14px;background:linear-gradient(180deg,#fdfdff,#eef1f7)}
.cards{display:grid;gap:6px}
.crd{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;background:#fff}
.crd:nth-child(even){background:#f5f7fb}   /* filas alternadas, como una planilla */
.crd .txt{display:block;flex:1;min-width:0}
.crd .f{display:block;font-weight:700;overflow-wrap:anywhere}
.crd .b{display:block;color:var(--txt-dim);font-size:13px;margin-top:1px;overflow-wrap:anywhere}
.crd .meta{display:block;font-size:11px;color:var(--txt-dim);opacity:.85;margin-top:3px}
.crd .iconbtn{color:var(--azul);border-color:var(--linea-suave);width:32px;height:30px;
  background:linear-gradient(180deg,#fff,#e9edf5)}
.crd .iconbtn:hover{border-color:var(--azul);background:linear-gradient(180deg,#fff,#dbe7fa)}
.box{
  flex:0 0 auto;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:2px;
  background:linear-gradient(180deg,#f4f6fa,#dfe4ee);color:var(--txt-dim);
  border:1px solid var(--linea-suave);margin-top:2px;text-transform:uppercase;
}
.box.due{background:linear-gradient(180deg,#ffd98a,#f0a92a);color:#5a3d00;border-color:#c98a15}

/* ============ estudio ============ */
#s-estudio{margin-bottom:calc((84px + var(--safe-b)) * -1)}
.study{display:flex;flex-direction:column;min-height:calc(100dvh - 108px)}
.progress{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:12px;color:var(--txt-dim);font-weight:700}
.progress .bar{flex:1;margin:0}
/* El contenedor sostiene la perspectiva; el giro pasa en .ficha. */
.flip{flex:1;display:grid;place-items:center;padding:6px 0;perspective:1400px}
.flip[hidden]{display:none}
/* Al pasar a la ficha siguiente entra desde abajo. Va acá y no en .ficha
   porque ahí el transform de la animación pelearía con el del giro. */
.flip.entra{animation:entra .24s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.ficha{
  display:grid;width:100%;cursor:pointer;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.75,.3,1);
}
.ficha.dada{transform:rotateY(180deg)}
/* Un instante sin transición, para que empezar la ficha siguiente no se vea
   como un giro para atrás: la anterior quedó dada vuelta. */
.ficha.quieta{transition:none}
.ficha:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:5px}

/* la ficha, con pinta de tarjeta de cartón sobre el escritorio */
.face{
  /* Las dos caras comparten la misma celda de la grilla: así la ficha mide lo
     que la más alta de las dos y la respuesta larga no se sale. */
  grid-area:1/1;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  width:100%;min-height:210px;padding:26px 20px;display:grid;place-items:center;
  text-align:center;background:linear-gradient(180deg,#ffffff,#f7f8fc);
  border:1px solid var(--linea);border-top:3px solid var(--azul);
  border-radius:4px;font:400 21px/1.35 Georgia,"Times New Roman",serif;
  overflow-wrap:anywhere;box-shadow:2px 3px 0 rgba(0,0,0,.14),var(--bisel);
}
/* el dorso vive girado media vuelta: cuando la ficha rota, queda de frente */
.face.dorso{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#fffdf0,#fff8dc);border-top-color:var(--warn);
}
.face .hint{display:block;font:400 12px Tahoma,Verdana,sans-serif;color:var(--txt-dim);margin-top:14px}
#estudio-acciones{margin-top:16px}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
/* con el botón de «volver a la pregunta» arriba, las notas se le arriman */
#estudio-acciones > .btn + .grades{margin-top:8px}
.grades .btn{flex-direction:column;gap:1px;padding:9px 4px;font-size:13px}
.grades .btn small{font-weight:400;font-size:10.5px;color:var(--txt-dim)}
.g1{color:var(--bad)} .g2{color:#9a6a00} .g3{color:#1f6b17}
.done{text-align:center;padding:30px 12px}
.done .big{font-size:38px;margin-bottom:6px}
.done h2{color:var(--azul-osc)}

/* ============ ventana modal ============ */
dialog{border:0;padding:0;background:none;color:inherit;width:min(560px,100%);max-width:100%;margin:auto auto 0}
dialog::backdrop{background:rgba(20,40,80,.5)}
.sheet{
  background:var(--panel);border:1px solid var(--azul-osc);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:0 var(--pad) calc(16px + var(--safe-b));
  max-height:88dvh;overflow:auto;box-shadow:0 -4px 18px rgba(0,0,0,.4);
}
@media (min-width:600px){
  dialog{margin:auto}
  .sheet{border-radius:var(--radius)}
}
/* el h2 de la hoja hace de barra de título de la ventanita */
.sheet h2{
  position:sticky;top:0;z-index:2;
  margin:0 calc(var(--pad) * -1) 14px;padding:8px 12px;font-size:14px;color:#fff;
  background:linear-gradient(180deg,var(--barra-1) 0%,var(--barra-2) 55%,#123f8c 100%);
  border-bottom:1px solid #0d2f6b;text-shadow:1px 1px 1px rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
@media (min-width:600px){.sheet h2{border-radius:4px 4px 0 0}}
.sheet > *:last-child{margin-bottom:0}

/* globo de aviso de la bandeja del sistema */
.toast{
  position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);
  background:var(--resalte);border:1px solid #b8a44e;color:#42360d;
  padding:9px 15px;border-radius:4px;font-size:13px;font-weight:700;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap;
  box-shadow:2px 3px 0 rgba(0,0,0,.18);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* barra de herramientas de abajo */
.fab{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:9px var(--pad) calc(9px + var(--safe-b));
  display:flex;justify-content:center;pointer-events:none;
}
.fab::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#eef1f7,#d6dbe6);
  border-top:1px solid var(--linea);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.fab > *{pointer-events:auto;width:min(692px,100%);position:relative}

/* ============ estado de sincronización ============ */
/* un panel hundido con un ledcito, como los de la barra de estado */
.sync{
  display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  flex:0 0 auto;padding:4px 8px;border-radius:3px;color:var(--txt);
  background:linear-gradient(180deg,#eef1f7,#dee3ed);
  border:1px solid #0d2f6b;box-shadow:var(--bisel-hundido);
}
.sync .punto{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#b6f0a6,var(--ok));
  border:1px solid rgba(0,0,0,.35);
}
.sync[data-estado=pendiente] .punto{background:radial-gradient(circle at 35% 30%,#ffd98a,var(--warn))}
.sync[data-estado=error] .punto{background:radial-gradient(circle at 35% 30%,#ff9d9d,var(--bad))}
.sync[data-estado=sincronizando] .punto{
  background:radial-gradient(circle at 35% 30%,#a9c9ff,var(--azul));animation:latir 1s ease-in-out infinite;
}
@keyframes latir{50%{opacity:.35}}
.sync .txt{display:none}
@media (min-width:420px){.sync .txt{display:inline}}

/* ============ login y registro ============ */
.auth{max-width:420px;margin:0 auto;padding:calc(4vh + 10px) 10px 40px}
.auth .marca{
  background:linear-gradient(180deg,var(--barra-1) 0%,var(--barra-2) 55%,#123f8c 100%);
  border:1px solid var(--azul-osc);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;
  padding:18px 16px;text-align:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.auth .marca svg{width:46px;height:46px;margin-bottom:6px;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.3))}
.auth .marca h1{font-size:21px;text-shadow:1px 1px 1px rgba(0,0,0,.45)}
.auth .marca p{margin:4px 0 0;font-size:12.5px;color:#dbe7fb}
.auth form{
  background:var(--panel);border:1px solid var(--azul-osc);
  border-radius:0 0 var(--radius) var(--radius);padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.auth .pie{text-align:center;margin-top:14px;font-size:13px;color:#e8eefb;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.auth .pie a{color:#fff;font-weight:700}
.check{display:flex;align-items:center;gap:8px;margin:2px 0 14px;font-size:13px;color:var(--txt)}
.check input{width:17px;height:17px;accent-color:var(--azul);flex:0 0 auto}
.check + .check{margin-top:-6px}
/* el cartel de error de toda la vida */
.flash{
  padding:9px 12px;border-radius:3px;margin-bottom:14px;font-size:13px;font-weight:700;
  background:#ffe9e9;border:1px solid var(--bad);color:#7d1418;
}

/* ============ cuenta ============ */
.cuenta{
  display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:12px;
  background:linear-gradient(180deg,#ffffff,#eaeef6);
  border:1px solid var(--linea);border-radius:3px;box-shadow:var(--bisel);
}
.cuenta .avatar{
  width:38px;height:38px;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(180deg,#7fb2f0,#1b4796);color:#fff;font-weight:700;font-size:18px;
  flex:0 0 auto;border:1px solid var(--azul-osc);text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.cuenta .quien{flex:1;min-width:0}
.cuenta .quien b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--azul-osc)}
.cuenta .quien span{font-size:12px;color:var(--txt-dim)}