/* Recetario Mari — hoja de estilo única (acceso, panel y recetario) */

:root{
  --tinta:#26170f; --tinta-2:#6b5647; --tenue:#9a8574;
  --fondo:#fbf6f0; --sup:#ffffff; --sup-2:#f6efe6;
  --linea:#ece0d2; --linea-2:#dccbb8;
  --acento:#b4652a; --acento-h:#96521f; --acento-sv:#f7e8d7;
  --espresso:#33200f;
  --ok:#4a6b4e; --ok-bg:#eef3ec; --alerta:#a6402c; --alerta-bg:#fbeae5;
  --info:#4a4a58; --info-bg:#f1f0f4; --sello:#8a5a20; --sello-bg:#f7efe4;
  --sombra:0 1px 2px rgba(38,23,15,.05), 0 10px 30px -12px rgba(38,23,15,.18);
  --radio:14px;
  --escala:1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --tinta:#f4ebe1; --tinta-2:#cbb9a8; --tenue:#9d8977;
    --fondo:#150f0a; --sup:#1f170f; --sup-2:#271d14;
    --linea:#33261b; --linea-2:#463526;
    --acento:#e39a50; --acento-h:#f0ad67; --acento-sv:#38260f;
    --espresso:#0f0a06;
    --ok:#9cc3a2; --ok-bg:#17241a; --alerta:#eb9982; --alerta-bg:#2c1712;
    --info:#c4c2cd; --info-bg:#20202a; --sello:#dcae74; --sello-bg:#2a2016;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-tema="oscuro"]{
  --tinta:#f4ebe1; --tinta-2:#cbb9a8; --tenue:#9d8977;
  --fondo:#150f0a; --sup:#1f170f; --sup-2:#271d14;
  --linea:#33261b; --linea-2:#463526;
  --acento:#e39a50; --acento-h:#f0ad67; --acento-sv:#38260f;
  --espresso:#0f0a06;
  --ok:#9cc3a2; --ok-bg:#17241a; --alerta:#eb9982; --alerta-bg:#2c1712;
  --info:#c4c2cd; --info-bg:#20202a; --sello:#dcae74; --sello-bg:#2a2016;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--fondo); color:var(--tinta);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:calc(16.5px * var(--escala)); line-height:1.55;
  -webkit-text-size-adjust:100%; overscroll-behavior:none;
}
h1,h2,h3,.display{font-family:"Fraunces","Iowan Old Style",Georgia,serif; letter-spacing:-.01em}
a{color:var(--acento)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2.5px solid var(--acento); outline-offset:2px; border-radius:6px}

/* ============ Botones y avisos ============ */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--acento); color:#fff; border:0; border-radius:11px;
  padding:14px 20px; font-weight:600; cursor:pointer; min-height:50px; width:100%;
  transition:background .15s;
}
.boton:hover{background:var(--acento-h)}
:root[data-tema="oscuro"] .boton, :root:not([data-tema="claro"]) .boton{color:#1b1109}
@media (prefers-color-scheme:light){:root:not([data-tema="oscuro"]) .boton{color:#fff}}
.chico{
  background:var(--sup); color:var(--tinta); border:1px solid var(--linea-2);
  border-radius:9px; padding:8px 12px; font-size:.86em; font-weight:600; cursor:pointer; min-height:40px;
}
.chico:hover{border-color:var(--acento); color:var(--acento)}
.chico.peligro:hover{border-color:var(--alerta); color:var(--alerta)}

.aviso{padding:13px 15px; border-radius:11px; margin:0 0 18px; font-size:.95em; border-left:4px solid}
.aviso.ok{background:var(--ok-bg); border-color:var(--ok)}
.aviso.alerta{background:var(--alerta-bg); border-color:var(--alerta)}
.aviso p{margin:6px 0 0}
.aviso code{background:rgba(0,0,0,.07); padding:2px 6px; border-radius:5px}

/* ============ Acceso e instalación ============ */
.pantalla-acceso{
  min-height:100svh; display:grid; place-items:center; padding:24px 18px;
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--acento-sv), transparent 65%),
    var(--fondo);
}
.tarjeta-acceso{
  width:100%; max-width:420px; background:var(--sup); border:1px solid var(--linea);
  border-radius:20px; padding:32px 26px; box-shadow:var(--sombra); text-align:left;
}
.emblema{
  width:66px; height:66px; border-radius:19px; display:grid; place-items:center;
  background:var(--acento-sv); color:var(--acento); margin:0 auto 16px;
}
.sello{
  margin:0 0 4px; text-align:center; font-size:.72em; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sello);
}
.tarjeta-acceso h1{margin:0 0 6px; text-align:center; font-size:1.9em; font-weight:700}
.apunte{margin:0 0 22px; text-align:center; color:var(--tinta-2); font-size:.94em}
.tarjeta-acceso form{display:flex; flex-direction:column; gap:15px}
label{display:flex; flex-direction:column; gap:6px; font-size:.85em; font-weight:600; color:var(--tinta-2)}
label small{font-weight:400; color:var(--tenue)}
input[type=text],input[type=email],input[type=password],input:not([type]),select{
  width:100%; padding:14px 15px; font-size:1.03rem; font-weight:400; color:var(--tinta);
  background:var(--fondo); border:1.5px solid var(--linea-2); border-radius:11px; min-height:52px;
}
input:focus,select:focus{border-color:var(--acento); background:var(--sup)}
.casilla{flex-direction:row; align-items:center; gap:10px; font-weight:500; color:var(--tinta)}
.casilla input{width:20px; height:20px; accent-color:var(--acento)}
.grupo{margin:10px 0 0; font-size:1.05em; color:var(--tinta)}
.pie-acceso{margin:20px 0 0; text-align:center; font-size:.85em; color:var(--tenue)}

/* ============ Panel de accesos ============ */
.barra-admin{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:var(--espresso); color:#f6ece2;
}
.barra-admin h1{margin:0 auto 0 0; font-size:1.15em; font-weight:700}
.barra-admin a{color:#f6ece2; text-decoration:none; font-size:.9em; font-weight:600; opacity:.85}
.barra-admin a:hover{opacity:1}
.admin{max-width:900px; margin:0 auto; padding:24px 18px 60px; display:flex; flex-direction:column; gap:22px}
.panel{background:var(--sup); border:1px solid var(--linea); border-radius:var(--radio); padding:22px; box-shadow:var(--sombra)}
.panel h2{margin:0 0 4px; font-size:1.3em; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.cifra{font-family:"Figtree",sans-serif; font-size:.6em; font-weight:600; color:var(--tenue); letter-spacing:.02em}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:16px}
.rejilla .boton{grid-column:1/-1; width:auto; justify-self:start; padding:14px 28px}
.usuarios{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.usuario{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; justify-content:space-between;
  padding:16px; border:1px solid var(--linea); border-radius:12px; background:var(--sup-2);
}
.usuario.apagado{opacity:.6}
.usuario .nombre{margin:0; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.usuario .correo{margin:2px 0 0; color:var(--tinta-2); font-size:.9em}
.usuario .cuando{margin:2px 0 0; color:var(--tenue); font-size:.8em}
.etiqueta{
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--acento-sv); color:var(--sello); padding:3px 8px; border-radius:20px;
}
.etiqueta.off{background:var(--alerta-bg); color:var(--alerta)}
.acciones{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.acciones form{margin:0}
.tu{font-size:.85em; color:var(--tenue)}
.mini summary{cursor:pointer; font-size:.86em; font-weight:600; padding:9px 12px; border:1px solid var(--linea-2); border-radius:9px; list-style:none}
.mini summary::-webkit-details-marker{display:none}
.mini .fila{display:flex; gap:8px; margin-top:8px}
.mini input{min-height:40px; padding:8px 12px}

/* ============ Recetario ============ */
.app{min-height:100svh; display:flex; flex-direction:column}

.cabecera{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top));
  background:var(--espresso); color:#f7eee4;
}
.cabecera .logo{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0}
.cabecera .logo b{font-family:"Fraunces",serif; font-size:1.02em; font-weight:700; white-space:nowrap}
.cabecera .logo span{font-size:.7em; letter-spacing:.12em; text-transform:uppercase; opacity:.6; display:block}
.icono{
  background:rgba(255,255,255,.08); border:0; color:inherit; width:42px; height:42px;
  border-radius:11px; display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
}
.icono:hover{background:rgba(255,255,255,.18)}
.icono svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.buscador{position:relative; flex:1 1 260px; max-width:420px; display:none}
.buscador input{
  width:100%; min-height:42px; padding:9px 14px 9px 40px; font-size:.95rem; border-radius:11px;
  background:rgba(255,255,255,.1); border:1px solid transparent; color:#fdf7f1;
}
.buscador input::placeholder{color:rgba(253,247,241,.55)}
.buscador input:focus{background:#fff; color:#26170f; border-color:var(--acento)}
.buscador input:focus::placeholder{color:#9a8574}
.buscador svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; opacity:.6; pointer-events:none}

.cuerpo{flex:1; display:flex; min-height:0}

/* Índice lateral */
.indice{
  width:290px; flex:0 0 290px; background:var(--sup); border-right:1px solid var(--linea);
  overflow-y:auto; padding:10px 0 40px; -webkit-overflow-scrolling:touch;
}
.indice h3{
  margin:18px 18px 6px; font-family:"Figtree",sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);
}
.indice ul{list-style:none; margin:0; padding:0 10px}
.indice button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--tinta);
  padding:11px 12px; border-radius:10px; display:flex; gap:10px; align-items:baseline; line-height:1.35;
}
.indice button:hover{background:var(--sup-2)}
.indice button.activo{background:var(--acento-sv); color:var(--acento); font-weight:600}
.indice .num{
  font-family:"Fraunces",serif; font-size:.82em; font-weight:700; color:var(--tenue);
  font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:26px;
}
.indice button.activo .num{color:var(--acento)}
.sin-resultado{padding:26px 20px; color:var(--tenue); font-size:.92em}

/* Lectura */
.lectura{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth}
.hoja{max-width:820px; margin:0 auto; padding:26px 20px 120px}
.migaja{
  margin:0 0 8px; font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acento);
}
.hoja h2{margin:0 0 6px; font-size:clamp(1.65rem,4.6vw,2.5rem); line-height:1.12; font-weight:700; text-wrap:balance}
.meta{margin:0 0 20px; color:var(--tenue); font-size:.93em; font-style:italic}
.hoja h3{
  margin:32px 0 10px; font-family:"Figtree",sans-serif; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acento);
  padding-bottom:8px; border-bottom:1px solid var(--linea);
}
.hoja p{margin:14px 0}
.hoja .nota{color:var(--tinta-2); font-style:italic; font-size:.95em}

.pasos{counter-reset:paso; list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:14px}
.pasos li{counter-increment:paso; display:flex; gap:14px; align-items:flex-start}
.pasos li::before{
  content:counter(paso); flex:0 0 auto; width:30px; height:30px; border-radius:10px;
  background:var(--acento-sv); color:var(--acento); font-family:"Fraunces",serif; font-weight:700;
  font-size:.92rem; display:grid; place-items:center; font-variant-numeric:tabular-nums; margin-top:1px;
}
.vinetas{list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:9px}
.vinetas li{position:relative; padding-left:20px}
.vinetas li::before{content:"—"; position:absolute; left:0; color:var(--acento); font-weight:700}

.tabla-wrap{
  margin:18px 0; border:1px solid var(--linea); border-radius:12px; overflow:hidden;
  background:var(--sup);
}
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.93em; font-variant-numeric:tabular-nums}
table.c3{min-width:520px} table.c4{min-width:660px} table.c5{min-width:780px}
th{
  background:var(--espresso); color:#f7eee4; text-align:left; font-family:"Figtree",sans-serif;
  font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:12px 14px; white-space:nowrap;
}
td{padding:12px 14px; border-top:1px solid var(--linea); vertical-align:top}
td.primera{font-weight:600}
tbody tr:nth-child(even){background:var(--sup-2)}

.caja{margin:20px 0; padding:16px 18px; border-radius:12px; border-left:4px solid; font-size:.96em}
.caja-t{margin:0 0 8px; font-family:"Figtree",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.caja ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px}
.caja.warn{background:var(--alerta-bg); border-color:var(--alerta)} .caja.warn .caja-t{color:var(--alerta)}
.caja.ok{background:var(--ok-bg); border-color:var(--ok)} .caja.ok .caja-t{color:var(--ok)}
.caja.info{background:var(--info-bg); border-color:var(--info)} .caja.info .caja-t{color:var(--info)}
.caja.label{background:var(--sello-bg); border-color:var(--sello)} .caja.label .caja-t{color:var(--sello)}

/* Pie de navegación */
.pasar{
  position:sticky; bottom:0; display:flex; gap:10px; align-items:center;
  padding:12px 20px; padding-bottom:max(12px, env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--fondo) 62%, transparent);
  max-width:820px; margin:0 auto;
}
.pasar button{
  flex:1; background:var(--sup); color:var(--tinta); border:1px solid var(--linea-2);
  border-radius:11px; padding:13px 14px; font-weight:600; cursor:pointer; min-height:50px;
}
.pasar button:hover:not(:disabled){border-color:var(--acento); color:var(--acento)}
.pasar button:disabled{opacity:.35; cursor:default}
.pasar .pos{font-size:.82em; color:var(--tenue); font-variant-numeric:tabular-nums; min-width:60px; text-align:center}

/* ============ Adaptación a pantalla ============ */

/* Escritorio y tablet apaisada: índice fijo + lectura */
@media (min-width:900px){
  .buscador{display:block}
  .icono.solo-movil{display:none}
}

/* Tablet vertical */
@media (min-width:640px) and (max-width:899px){
  .indice{width:250px; flex-basis:250px}
  .buscador{display:block}
  .icono.solo-movil{display:none}
}

/* El buscador del índice solo existe en teléfono */
@media (min-width:640px){ .indice .buscador-movil{display:none} }

/* Teléfono: la cabecera se aprieta, el subtítulo estorba */
@media (max-width:639px){
  .cabecera{gap:7px; padding-left:10px; padding-right:10px}
  .cabecera .logo span{display:none}
  .cabecera .logo b{font-size:.97em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
  .cabecera .logo{overflow:hidden}
  .icono{width:40px; height:40px; border-radius:10px}
}

/* Teléfono: el índice se convierte en pantalla completa */
@media (max-width:639px){
  .indice{
    position:fixed; inset:0; top:0; z-index:40; width:100%; flex-basis:auto;
    border-right:0; padding-top:0; display:none;
  }
  .indice.abierto{display:block}
  .indice .buscador-movil{
    position:sticky; top:0; background:var(--sup); padding:12px 14px;
    border-bottom:1px solid var(--linea); display:flex; gap:10px; z-index:2;
  }
  .indice .buscador-movil input{
    flex:1; min-height:46px; padding:10px 14px; border-radius:11px;
    border:1.5px solid var(--linea-2); background:var(--fondo); color:var(--tinta);
  }
  .hoja{padding:20px 16px 110px}
  .pasar{padding-left:16px; padding-right:16px}
}

/* Teléfono en horizontal: cabecera más baja, dos columnas si cabe */
@media (max-width:900px) and (orientation:landscape){
  .cabecera{padding-top:6px; padding-bottom:6px}
  .cabecera .logo span{display:none}
  .hoja{padding-top:16px; max-width:none}
  .hoja h2{font-size:clamp(1.4rem,3.4vw,1.9rem)}
}
@media (min-width:700px) and (max-width:899px) and (orientation:landscape){
  .indice{display:block; position:static; width:230px; flex-basis:230px; border-right:1px solid var(--linea)}
  .indice .buscador-movil{display:none}
  .icono.solo-movil{display:none}
  .buscador{display:block}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
@media print{
  .cabecera,.indice,.pasar{display:none}
  .lectura{overflow:visible}
  .hoja{max-width:none; padding:0}
}

/* ============================================================
   Índice en árbol (categoría › subcategoría › grupo › receta)
   ============================================================ */
#listaIndice details { margin: 0; }
#listaIndice details > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem .6rem; border-radius: .5rem;
  color: var(--tinta); font-weight: 600;
}
#listaIndice details > summary::-webkit-details-marker { display: none; }
#listaIndice details > summary::before {
  content: "›"; display: inline-block; width: .7rem; flex: none;
  transform: rotate(90deg); transition: transform .15s ease;
  color: var(--acento); font-weight: 700;
}
#listaIndice details:not([open]) > summary::before { transform: rotate(0deg); }
#listaIndice details > summary:hover { background: var(--sup); }
#listaIndice details > div { margin-left: .55rem; padding-left: .55rem; border-left: 1px solid var(--linea); }

#listaIndice details.n1 > summary { font-family: 'Fraunces', Georgia, serif; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--espresso); margin-top: .35rem; }
#listaIndice details.n2 > summary { font-size: .9rem; color: var(--acento); }
#listaIndice details.n3 > summary { font-size: .85rem; color: var(--tinta); opacity: .9; }

#listaIndice a.rec {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .42rem .6rem; border-radius: .5rem;
  color: var(--tinta); text-decoration: none; font-size: .87rem; line-height: 1.35;
}
#listaIndice a.rec:hover { background: var(--sup); }
#listaIndice a.rec.activo { background: var(--acento-sv); color: var(--acento); font-weight: 600; }
#listaIndice .num { flex: none; font-variant-numeric: tabular-nums; font-size: .78em; opacity: .65; min-width: 3.1em; }
#listaIndice .cuenta { padding: .4rem .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--acento); font-weight: 700; }
#listaIndice .planas a.rec { padding-bottom: .1rem; }
#listaIndice .donde { display: block; padding: 0 .6rem .5rem 4.3rem; font-size: .74rem; opacity: .6; }

/* Título de la receta con su número */
.hoja h2 .num {
  display: inline-block; margin-right: .5rem;
  color: var(--acento); font-variant-numeric: tabular-nums;
}

/* Ver también */
.ver-tambien {
  margin: 1.6rem 0 .4rem; padding-top: .9rem;
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.ver-tambien > span {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--acento); margin-right: .2rem;
}
.ver-tambien a.salto {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  background: var(--sup); border: 1px solid var(--linea);
  color: var(--acento); text-decoration: none; font-size: .8rem;
}
.ver-tambien a.salto:hover { border-color: var(--acento); }

/* Índice dentro de la hoja */
.indice-web { margin-top: .6rem; }
.indice-web .ix-t { margin: .9rem 0 .2rem; font-weight: 700; color: var(--espresso); }
.indice-web .ix-n2 { margin-left: .8rem; color: var(--acento); font-size: .92em; }
.indice-web .ix-n3 { margin-left: 1.6rem; font-size: .9em; }
.indice-web a.ix-r {
  display: inline-block; margin: .12rem .35rem .12rem 0; padding: .18rem .5rem;
  border-radius: .4rem; background: var(--sup);
  color: var(--tinta); text-decoration: none; font-size: .82rem;
}
.indice-web a.ix-r:hover { color: var(--acento); }
.indice-web a.ix-r b { font-variant-numeric: tabular-nums; opacity: .6; font-weight: 600; }

/* Firma */
.firma {
  margin: 2.5rem 0 1rem; text-align: center;
  font-size: .75rem; letter-spacing: .04em; opacity: .55;
}