/* Fogón Eventos — hoja de estilos de la aplicación */

:root{
  --bg:#FAF5F0;
  --surface:#FFFFFF;
  --surface-2:#F4E6DD;
  --border:#E6D2C3;
  --text:#2A1B17;
  --text-secondary:#6B5347;
  --text-tertiary:#9C8577;
  --accent:#7A1F2E;
  --accent-strong:#59141F;
  --accent-soft:#F2DCDE;
  --copper:#B9853A;
  --copper-soft:#F5E7CE;
  --success:#3F7D52;
  --success-soft:#E3F0E4;
  --warning:#B9853A;
  --warning-soft:#F5E7CE;
  --danger:#A63A2E;
  --danger-soft:#F7E1DA;
  --shadow: 0 1px 2px rgba(42,27,23,.05), 0 8px 24px -12px rgba(42,27,23,.16);
  --radius-lg:16px;
  --radius-md:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1D1512; --surface:#2B1E1A; --surface-2:#372722; --border:#4C382F;
    --text:#F3E7DE; --text-secondary:#C7AD9D; --text-tertiary:#98816F;
    --accent:#D0707C; --accent-strong:#E69AA3; --accent-soft:#3E1E23;
    --copper:#D9A857; --copper-soft:#3D2E17; --success:#6FBF82; --success-soft:#1F3423;
    --warning:#D9A857; --warning-soft:#3D2E17; --danger:#D9695A; --danger-soft:#3B211C;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
svg{width:16px;height:16px;flex-shrink:0;vertical-align:-3px;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-name,.page-title{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  letter-spacing:-0.01em;
}
.mono,.num{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:264px;background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s ease;z-index:60;
}
.sidebar.open{transform:translateX(0);}
.sidebar-head{padding:22px 22px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.flame{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.flame svg{width:19px;height:19px;}
.brand-name{font-size:1.28rem;font-weight:600;line-height:1.1;}
.brand-sub{font-size:.68rem;color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase;margin-top:1px;}
.nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text-secondary);font-size:.92rem;font-weight:500;}
.nav-item svg{width:18px;height:18px;}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600;}
.sidebar-foot{padding:16px 22px;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-tertiary);}
.user-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.user-foot-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.icon-btn.icon-btn-neutral:hover{background:var(--accent-soft);color:var(--accent);border-color:transparent;}
.user-foot-name{font-size:.84rem;font-weight:600;color:var(--text);}
.user-foot-rol{font-size:.72rem;color:var(--text-tertiary);}
.overlay{position:fixed;inset:0;background:rgba(15,20,15,.4);z-index:50;display:none;}
.overlay.show{display:block;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:64px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;background:var(--bg);position:sticky;top:0;z-index:30;}
.crumb{font-size:.95rem;color:var(--text-secondary);}
.crumb b{color:var(--text);font-weight:600;}
.hamburger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer;}
@media (min-width:861px){
  .sidebar{position:sticky;top:0;height:100vh;transform:none;}
  .hamburger{display:none;}
  .overlay{display:none !important;}
}
.content{padding:26px 22px 60px;max-width:1180px;margin:0 auto;width:100%;}
@media (max-width:400px){ .content{padding:18px 16px 50px;} }

/* Genéricos */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.page-head h1{font-size:1.7rem;font-weight:600;margin:0;}
.page-head p{margin:4px 0 0;color:var(--text-secondary);font-size:.92rem;}

.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-size:.88rem;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-strong);}
.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-sm{padding:6px 12px;font-size:.8rem;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{filter:brightness(0.92);}
.btn:disabled{opacity:.7;cursor:not-allowed;}
.btn .btn-spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;display:inline-block;animation:btn-spin .7s linear infinite;}
@keyframes btn-spin{to{transform:rotate(360deg);}}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.stat-grid{grid-template-columns:1fr;}}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow);}
.stat-label{font-size:.72rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.stat-value{font-size:1.5rem;font-weight:600;margin-top:6px;color:var(--text);}
.stat-hint{font-size:.78rem;color:var(--text-secondary);margin-top:3px;}

.stat-tile--wine{border-top-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft) 0%,var(--surface) 70px);}
.stat-tile--wine .stat-label{color:var(--accent-strong);}
.stat-tile--wine .stat-value{color:var(--accent);}

.stat-tile--gold{border-top-color:var(--copper);background:linear-gradient(180deg,var(--copper-soft) 0%,var(--surface) 70px);}
.stat-tile--gold .stat-label{color:var(--copper);}
.stat-tile--gold .stat-value{color:var(--text);}

.stat-tile--sage{border-top-color:var(--success);background:linear-gradient(180deg,var(--success-soft) 0%,var(--surface) 70px);}
.stat-tile--sage .stat-label{color:var(--success);}
.stat-tile--sage .stat-value{color:var(--success);}

.stat-tile--terracotta{border-top-color:var(--danger);background:linear-gradient(180deg,var(--danger-soft) 0%,var(--surface) 70px);}
.stat-tile--terracotta .stat-label{color:var(--danger);}
.stat-tile--terracotta .stat-value{color:var(--danger);}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);}
.card-pad{padding:20px;}
.section-title{font-size:1.02rem;font-weight:600;margin:0 0 14px;}

.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;}
.chip svg{width:11px;height:11px;}
.chip-success{background:var(--success-soft);color:var(--success);}
.chip-warning{background:var(--warning-soft);color:var(--warning);}
.chip-danger{background:var(--danger-soft);color:var(--danger);}
.chip-neutral{background:var(--surface-2);color:var(--text-secondary);}
.chip-muted{background:transparent;border:1px solid var(--border);color:var(--text-tertiary);}

.toggle-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;}
.toggle-card-text{display:flex;gap:12px;align-items:flex-start;}
.toggle-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-tertiary);transition:background .15s,color .15s,border-color .15s;}
.toggle-card-icon svg{width:18px;height:18px;}
.toggle-card.is-public .toggle-card-icon{background:var(--success-soft);border-color:transparent;color:var(--success);}
.toggle-card-title{font-weight:700;color:var(--text);font-size:.92rem;margin-bottom:3px;}
.toggle-card-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.45;}
.toggle-card-state{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);margin-top:9px;}
.toggle-card.is-public .toggle-card-state{color:var(--success);}

.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;margin-top:2px;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;inset:0;cursor:pointer;z-index:1;}
.switch-track{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .15s;}
.switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s;}
.switch input:checked ~ .switch-track{background:var(--success);}
.switch input:checked ~ .switch-thumb{transform:translateX(18px);}
.switch input:focus-visible ~ .switch-track{outline:2px solid var(--accent);outline-offset:2px;}

.meter{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.meter > span{display:block;height:100%;background:var(--accent);border-radius:999px;}
.meter.warn > span{background:var(--warning);}
.meter.danger > span{background:var(--danger);}
.meter-row{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--text-secondary);margin-bottom:6px;}

table.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--border);}
.table td{padding:12px;border-bottom:1px solid var(--border);font-size:.88rem;vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table tr:hover td{background:var(--surface-2);}
.table-wrap{overflow-x:auto;}
.cell-name{font-weight:600;}
.cell-muted{color:var(--text-secondary);font-size:.82rem;}
.row-actions{display:flex;gap:4px;justify-content:flex-end;}

.toolbar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;min-width:220px;}
.search svg{width:15px;height:15px;color:var(--text-tertiary);}
.search input{border:none;background:none;outline:none;color:var(--text);font-size:.86rem;width:100%;}

.event-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow);}
.event-card:hover{border-color:var(--accent);}
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.event-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.event-card h3{font-size:1.08rem;margin:0 0 3px;}
.event-meta{font-size:.8rem;color:var(--text-secondary);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.event-meta span{display:inline-flex;align-items:center;gap:5px;}
.event-meta svg{width:13px;height:13px;}
.mini-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-secondary);}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;}
.tab{padding:10px 4px;margin-right:20px;font-size:.88rem;font-weight:600;color:var(--text-tertiary);border-bottom:2px solid transparent;white-space:nowrap;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--accent-strong);border-bottom-color:var(--accent);}

.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
.summary-grid-4{grid-template-columns:repeat(4,1fr);}
.summary-grid-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){.summary-grid-5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px){.summary-grid{grid-template-columns:1fr;}}

.bar-list{display:flex;flex-direction:column;gap:10px;}
.bar-list-row{display:grid;grid-template-columns:120px 1fr 90px;gap:10px;align-items:center;font-size:.8rem;}
.bar-track{height:9px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
.bar-fill{height:100%;background:var(--copper);border-radius:999px;}
.bar-fill.alt{background:var(--accent);}

/* Fila "etiqueta ... monto" de un resumen tipo llave-valor (ej. "Proyección
   vs. costo real" en el Cierre financiero) — grid en vez de flex
   space-between para que, cuando la etiqueta es larga y tiene que partirse
   en dos líneas, el monto se quede fijo a la derecha en su propia columna
   (sin salto de línea, gracias a .mono abajo) en vez de terminar cayendo a
   una tercera línea suelta y viéndose apretado (reportado por Eyaelkys en
   la impresión del Cierre financiero). */
.kv-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;}
.kv-row .mono{white-space:nowrap;}

/* Tarjeta de receta dentro del detalle de un Evento/Práctica: mismo
   lenguaje visual que .dash-card (cabecera con degradado, alternando las 4
   variantes según categoría — ver comentario junto a .dash-card-head.is-sage
   más abajo), pero de ancho completo porque su cuerpo aloja una tabla de
   ingredientes en vez de caber en una cuadrícula. La cabecera y la barra de
   herramientas (recipe-card-toolbar: colapsar, porciones a preparar, quitar)
   quedan visibles aun con la tarjeta colapsada — solo se oculta
   .recipe-card-body (la tabla y "Ver preparación") — para poder ajustar
   porciones o quitar la receta sin tener que expandirla primero.*/
.recipe-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface);margin-bottom:14px;box-shadow:var(--shadow);}
.recipe-card-head{padding:16px 20px;color:#fff;background:linear-gradient(135deg,var(--accent) 0%,var(--copper) 100%);}
.recipe-card-head.is-practica{background:linear-gradient(135deg,var(--copper) 0%,var(--accent-strong) 100%);}
.recipe-card-head.is-sage{background:linear-gradient(135deg,var(--success) 0%,var(--copper) 100%);}
.recipe-card-head.is-wine-sage{background:linear-gradient(135deg,var(--accent) 0%,var(--success) 100%);}
.recipe-card-head .dash-title{color:#fff;}
.recipe-card-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--border);}
.recipe-card-body{padding:16px 20px;}
.recipe-card-head h4{margin:0;font-size:1rem;font-family:'Fraunces',serif;}
.portion-control{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-secondary);}
.portion-control input{width:72px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:.85rem;}

/* Colapsar/expandir una tarjeta de receta (eventos y prácticas): con la
   tarjeta colapsada, solo queda visible el encabezado (nombre, porciones,
   costo total) — útil para tener un overview rápido de varias recetas a la
   vez. El botón por tarjeta rota su flecha (mismo ícono chevronDown que el
   menú de acciones de recetas/form.php) para indicar el estado. */
.recipe-card-toolbar [data-role="recipe-collapse-toggle"] svg{transition:transform .15s;}
.recipe-card.collapsed [data-role="recipe-collapse-toggle"] svg{transform:rotate(-90deg);}
.recipe-card.collapsed .recipe-card-body{display:none;}

/* Insignia circular de color junto a un <h2 class="section-title">, para
   dar identidad visual a tarjetas de resumen que no usan cabecera de
   degradado completa (p.ej. "Gastos por categoría"/"Estado de pagos" en la
   pestaña Resumen de un evento) — mismo espíritu que .dash-card-head pero
   para superficies blancas. */
.section-title-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.section-title-row .section-title{margin:0;}
.section-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.section-icon svg{width:15px;height:15px;}
.section-icon.is-gold{background:var(--copper-soft);color:var(--copper);}
.section-icon.is-wine{background:var(--accent-soft);color:var(--accent);}
.section-icon.is-sage{background:var(--success-soft);color:var(--success);}

.empty{text-align:center;padding:40px 20px;color:var(--text-secondary);}
.empty svg{width:38px;height:38px;color:var(--text-tertiary);margin-bottom:10px;}

.alert{padding:12px 16px;border-radius:10px;font-size:.88rem;margin-bottom:18px;}
.alert-success{background:var(--success-soft);color:var(--success);}
.alert-error{background:var(--danger-soft);color:var(--danger);}

.field{margin-bottom:14px;}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.9rem;font-family:inherit;}
.field textarea{resize:vertical;line-height:1.55;min-height:120px;}

.prep-details{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;}
.prep-details summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px;list-style:none;}
.prep-details summary::-webkit-details-marker{display:none;}
.prep-details[open] summary{margin-bottom:8px;}
.prep-text{font-size:.86rem;line-height:1.6;color:var(--text-secondary);white-space:pre-line;}
.prep-parrafo{white-space:pre-line;}
.rec-icono{display:inline-block;margin-right:2px;font-style:normal;}
.icon-picker{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;max-width:640px;}
.icon-picker-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);font-size:1.15rem;line-height:1;cursor:pointer;}
.icon-picker-btn:hover{background:var(--accent-soft);border-color:var(--accent);}
.prep-aviso{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:var(--radius-md);background:var(--warning-soft);border-left:4px solid var(--warning);color:var(--text);font-weight:500;white-space:normal;}
.prep-aviso-icono{color:var(--warning);font-size:1rem;line-height:1.4;flex:none;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.field-row{grid-template-columns:1fr;}}
.hint{font-size:.72rem;color:var(--text-tertiary);margin-top:4px;}
.form-card{max-width:640px;}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}

/* Cada línea de ingrediente es un bloque de dos filas: .ing-row (los campos
   principales: cantidad, nombre, unidad, costo, monto, botones) y
   .ing-row-extra debajo (opcional, reemplazo, acciones/cortes) — agrupadas
   visualmente con un separador sutil entre una línea de ingrediente y la
   siguiente. */
.ing-row-block{padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--border);}
.ing-row-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.ing-row{display:grid;grid-template-columns:0.75fr auto 1.5fr 1.25fr 0.95fr 0.85fr auto auto;gap:8px;margin-bottom:6px;align-items:center;}
@media (max-width:600px){.ing-row{grid-template-columns:1fr 1fr;}}
.ing-row input,.ing-row select{padding:7px 9px;font-size:.82rem;}
.ing-row input[data-role="ing-cantidad"][readonly]{background:var(--bg);color:var(--text-tertiary);cursor:not-allowed;}
.ing-row-labels{font-size:.7rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
@media (max-width:600px){.ing-row-labels{display:none;}}
.ing-monto{font-size:.82rem;font-weight:600;text-align:right;color:var(--text);white-space:nowrap;}
.ing-total{margin-top:10px;text-align:right;font-size:.9rem;font-weight:600;}
.icon-btn{background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);flex-shrink:0;}
.icon-btn:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent;}
.icon-btn.icon-btn-add:hover{background:var(--success-soft);color:var(--success);}

/* Segunda fila de cada línea de ingrediente: opcional, reemplazo, acciones. */
.ing-row-extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-left:2px;}
.ing-row-extra input[type="text"]{padding:6px 9px;font-size:.78rem;}
/* Especificidad "label.clase" a propósito: estas casillas viven dentro de un
   .field (la ficha de Ingredientes), y ".field label{display:block}" (más
   arriba en este archivo) tiene más especificidad que una clase sola, así
   que le ganaba a ".al-gusto-check{display:inline-flex}" y rompía por
   completo el acomodo en fila de estas casillas — cada"al gusto"/"opcional"
   volvía a apilarse como bloque. */
label.al-gusto-check,label.opcional-check{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--text-secondary);white-space:nowrap;cursor:pointer;}
.al-gusto-check input,.opcional-check input{margin:0;}
/* Menú desplegable de "Preparación (cortes/acciones)": un botón que resume
   lo marcado (o un texto de relleno si no hay nada marcado todavía) y, al
   hacer clic, despliega un panel con las casillas de todas las acciones
   activas — mucho más compacto que mostrarlas todas sueltas en la fila. */
.acciones-dropdown{position:relative;}
.acciones-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:220px;max-width:100%;padding:7px 10px;font-size:.78rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-tertiary);cursor:pointer;text-align:left;}
.acciones-toggle:hover{border-color:var(--accent);}
.acciones-toggle[data-has-value="1"]{color:var(--text);}
.acciones-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acciones-toggle svg{width:14px;height:14px;flex-shrink:0;color:var(--text-tertiary);transition:transform .15s;}
.acciones-dropdown.open .acciones-toggle{border-color:var(--accent);}
.acciones-dropdown.open .acciones-toggle svg{transform:rotate(180deg);}
.acciones-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:30;width:340px;max-width:min(340px, 80vw);max-height:250px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;}
.acciones-panel[hidden]{display:none;}
label.accion-item{display:flex;align-items:center;gap:6px;font-size:.78rem;padding:5px 6px;border-radius:6px;cursor:pointer;color:var(--text-secondary);white-space:nowrap;}
.accion-item:hover{background:var(--surface-2);}
.accion-item input{margin:0;}
@media (max-width:600px){.acciones-panel{grid-template-columns:1fr;width:260px;}}

/* Modal (alta rápida de ingrediente, etc.) */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,20,15,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal-backdrop[hidden]{display:none;}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:22px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-head h2{font-size:1.05rem;font-weight:600;margin:0;}

/* Foto de receta */
.recipe-photo-preview{width:100%;max-width:320px;border-radius:var(--radius-md);border:1px solid var(--border);display:block;margin-bottom:10px;object-fit:cover;aspect-ratio:4/3;}
.recipe-photo-box{border:1px dashed var(--border);border-radius:var(--radius-md);padding:14px;text-align:center;color:var(--text-secondary);}

/* Banner de evento (formulario, y hero del detalle del evento) */
.event-banner-preview{width:100%;max-width:520px;border-radius:var(--radius-md);border:1px solid var(--border);display:block;margin-bottom:10px;object-fit:cover;aspect-ratio:21/9;}
.event-banner-hero{width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border);display:block;margin-bottom:18px;}

/* Galería de fotos de trabajos (pestaña "Fotos" de una práctica) */
.fotos-practica-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.fotos-practica-card{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--surface);}
.fotos-practica-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.fotos-practica-caption{padding:8px 10px;font-size:.8rem;color:var(--text-secondary);}
.fotos-practica-delete{position:absolute;top:8px;right:8px;}
.fotos-practica-delete .icon-btn{background:var(--surface);}

.check-list{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:6px;}
.check-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;}
.check-row:hover{background:var(--surface-2);}
.check-row input{width:16px;height:16px;accent-color:var(--accent);}
.check-row .cname{font-size:.87rem;font-weight:500;}
.check-row .csub{font-size:.74rem;color:var(--text-tertiary);}

.badge-demo{font-size:.68rem;background:var(--surface-2);color:var(--text-secondary);padding:4px 10px;border-radius:999px;font-weight:600;}

/* Panel del padre y panel del estudiante (panel_padre.php,
   panel_estudiante.php): una persona que entra aquí quiere un vistazo
   rápido y agradable, no una tabla de trabajo — así que usan tarjetas con
   color en vez del estilo plano del resto del sistema (pensado para el
   equipo del taller, que sí trabaja con los datos todo el día). */
.child-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:24px;}
.child-card-head{padding:22px 24px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,var(--accent) 0%,var(--copper) 100%);}
.child-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;flex-shrink:0;border:2px solid rgba(255,255,255,.4);}
.child-name{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;line-height:1.25;}
.child-sub{opacity:.88;font-size:.84rem;margin-top:2px;}
.child-balance{text-align:right;}
.child-balance-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.88;}
.child-balance-value{font-family:'IBM Plex Mono',monospace;font-size:1.7rem;font-weight:700;margin-top:2px;}

.mini-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 24px 6px;}
@media (max-width:640px){.mini-stat-row{grid-template-columns:1fr;}}
.mini-stat{border-radius:var(--radius-md);padding:12px 14px;background:var(--surface-2);}
.mini-stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);font-weight:700;}
.mini-stat-value{font-family:'IBM Plex Mono',monospace;font-size:1.15rem;font-weight:700;margin-top:3px;color:var(--text);}
.mini-stat.is-gold .mini-stat-value{color:var(--copper);}
.mini-stat.is-danger .mini-stat-value{color:var(--danger);}
.mini-stat.is-sage .mini-stat-value{color:var(--success);}

.part-list{padding:6px 24px 22px;}
.part-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;margin-top:14px;background:var(--bg);}
.part-card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.part-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.part-icon svg{width:18px;height:18px;}
.part-icon.evento{background:var(--accent-soft);color:var(--accent);}
.part-icon.practica{background:var(--copper-soft);color:var(--copper);}
.part-title{font-weight:700;color:var(--text);font-size:.98rem;}
.part-date{font-size:.8rem;color:var(--text-secondary);}
.part-progress{margin-left:auto;min-width:180px;text-align:right;}
.part-progress .meter-row{justify-content:flex-end;gap:8px;}
.part-progress .meter{margin-top:5px;}
.part-money-row{display:flex;justify-content:flex-end;gap:14px;font-size:.78rem;color:var(--text-secondary);flex-wrap:wrap;}
.part-money-row b{color:var(--text);}

.pago-row-list{display:flex;flex-direction:column;gap:6px;}
.pago-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:9px;font-size:.85rem;flex-wrap:wrap;}
.pago-row .pago-fecha{color:var(--text-tertiary);font-size:.78rem;min-width:120px;}
.pago-row .pago-monto{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--text);min-width:90px;}
.pago-row .pago-nota{color:var(--text-secondary);font-size:.78rem;margin-left:auto;}

/* Tarjetas de Eventos y Prácticas en su listado (eventos/index.php,
   practicas/index.php): mismo lenguaje visual que los paneles de padre y
   estudiante de arriba (encabezado con degradado, mini-stats de color)
   para que el listado dé un vistazo rápido y agradable en vez de la
   tarjeta plana anterior. Puramente aditivo — usan el mismo contenedor de
   cuadrícula .event-grid de siempre, y el listado de Recetas sigue usando
   .event-card sin cambios. */
.dash-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%;transition:box-shadow .15s ease;}
.dash-card:hover{box-shadow:0 6px 20px rgba(42,27,23,.12);}
.dash-card-head{padding:18px 20px 16px;color:#fff;background:linear-gradient(135deg,var(--accent) 0%,var(--copper) 100%);}
.dash-card-head.is-practica{background:linear-gradient(135deg,var(--copper) 0%,var(--accent-strong) 100%);}
.dash-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.dash-head-id{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.dash-icon{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(255,255,255,.35);}
.dash-icon svg{width:19px;height:19px;}
.dash-title{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;line-height:1.3;}
.dash-title a{color:#fff;}
.dash-title a:hover{text-decoration:underline;}
.dash-meta{font-size:.78rem;opacity:.92;display:flex;gap:11px;flex-wrap:wrap;margin-top:6px;}
.dash-meta span{display:inline-flex;align-items:center;gap:4px;}
.dash-meta svg{width:12px;height:12px;}
.dash-chips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
/* Tarjetas de Padres/Estudiantes: los chips de estado de acceso pueden ser anchos ("Restablecimiento pendiente"), así que van en fila debajo del nombre en vez de aplastarlo. */
.dash-head-wrap{flex-wrap:wrap;}
.dash-head-wrap .dash-chips{flex-direction:row;flex-wrap:wrap;align-items:flex-start;flex-shrink:1;}
.dash-chips .chip-muted{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff;}

.dash-body{padding:16px 20px 18px;display:flex;flex-direction:column;gap:14px;flex:1;}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;}
.dash-stat{background:var(--surface-2);border-radius:var(--radius-md);padding:8px 11px;}
.dash-stat-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);font-weight:700;}
.dash-stat-value{font-family:'IBM Plex Mono',monospace;font-size:.92rem;font-weight:700;color:var(--text);margin-top:2px;}
.dash-stat.is-gold .dash-stat-value{color:var(--copper);}
.dash-stat.is-sage .dash-stat-value{color:var(--success);}
.dash-stat-empty{grid-column:1/-1;font-size:.82rem;color:var(--text-tertiary);}

.dash-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.dash-footer .row-actions{margin-left:auto;}
/* Tarjetas de gasto: hasta cuatro acciones (confirmar/pagar, editar, facturas, borrar), así que se permite que bajen a otra línea. */
.dash-footer.dash-footer-wrap{flex-wrap:wrap;gap:8px;}

/* Dos variantes más del degradado de .dash-card-head, para diferenciar de
   un vistazo más tipos de tarjeta: Estudiantes usa is-sage (salvia→dorado),
   Padres usa is-wine-sage (vino→salvia), y Recetas alterna las 4 variantes
   (por defecto, is-practica, is-sage, is-wine-sage) según su categoría, solo
   para que categorías distintas se distingan sin tener que leer el texto. */
.dash-card-head.is-sage{background:linear-gradient(135deg,var(--success) 0%,var(--copper) 100%);}
.dash-card-head.is-wine-sage{background:linear-gradient(135deg,var(--accent) 0%,var(--success) 100%);}

/* Tarjetas de persona (Estudiantes, Padres): mismo lenguaje visual que
   .dash-card, con un avatar de iniciales (.child-avatar, ya usado en los
   paneles) en vez de un ícono de tipo, y una fila de contacto en vez de
   mini-stats de dinero. */
.person-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--text-secondary);}
.person-meta span{display:inline-flex;align-items:center;gap:5px;}
.person-meta svg{width:13px;height:13px;color:var(--text-tertiary);flex-shrink:0;}

/* Impresión de la pestaña "Lista de Compra" (eventos y prácticas): al
   imprimir (Ctrl+P) desde esa pestaña, se oculta todo el menú/navegación y
   los botones, dejando solo el contenido de la lista lista para llevar al
   súper o guardar como PDF desde el diálogo de impresión del navegador.
   ".no-print" marca además botones sueltos que no tiene sentido imprimir
   (Editar, Agregar receta, Colapsar todo, Imprimir/Descargar) aunque estén
   fuera de la pestaña de compras.

   Los reportes imprimibles (Cierre financiero, Estado de cuenta) son otro
   caso: ahí sí queremos el título/subtítulo (.page-head) y las tarjetas de
   resumen (.summary-grid) en la hoja impresa o el PDF, y con sus colores de
   fondo (por defecto el navegador no imprime fondos de color a menos que se
   fuerce con print-color-adjust). Esas páginas marcan <body class="report-print">
   (ver $bodyClass en includes/layout_top.php) para pedir ese comportamiento
   sin afectar a la Lista de Compra. */
@media print{
  .sidebar,.topbar,.tabs,.summary-grid,.page-head,.no-print{display:none !important;}
  body,.app,.main,.content{background:#fff !important;}
  .content{margin:0 !important;padding:0 !important;max-width:none !important;}
  .card{box-shadow:none !important;border:none !important;}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important;}

  body.report-print .page-head{display:flex !important;}
  body.report-print .summary-grid{display:grid !important;}

  /* Reportes imprimibles (Cierre financiero, Estado de cuenta): que una
     fila de una tabla nunca quede cortada a la mitad entre una página
     impresa y la siguiente, y que el renglón "Total" (tfoot) no se repita
     de más — por defecto el navegador trata <tfoot> como un pie que se
     repite al final de CADA página igual que <thead> se repite arriba, así
     que en una tabla larga el total terminaba apareciendo antes de tiempo,
     a mitad de la tabla, en la primera página (reportado por Eyaelkys:
     "que los números no se aprieten"). Con esto, el encabezado sigue
     repitiéndose arriba en cada página nueva, pero el total solo aparece
     una vez, al final de verdad.
  */
  body.report-print table thead{display:table-header-group;}
  body.report-print table tfoot{display:table-row-group;}
  body.report-print table tr,
  body.report-print .stat-tile,
  body.report-print .card{break-inside:avoid;page-break-inside:avoid;}
}

@page{margin:14mm 12mm;}

/* Reportes → Cierre financiero: bloques Eventos / Prácticas, cada uno con "En curso y pendientes" y "Finalizados" (plegado). */
.cierre-grupo-titulo{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);padding:14px 16px 6px;}
.tabla-cierre{table-layout:fixed;}
.cierre-finalizados{border-top:1px solid var(--border);margin-top:6px;}
.cierre-finalizados summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:.82rem;font-weight:600;color:var(--accent);}
.cierre-finalizados summary::-webkit-details-marker{display:none;}
.cierre-finalizados summary svg{width:14px;height:14px;transition:transform .15s;transform:rotate(-90deg);}
.cierre-finalizados[open] summary svg{transform:rotate(0);}

/* Cierre financiero: cuadro destacado de "Pendiente de pago" (ancho completo, más grande y con borde marcado). */
.stat-tile--destacado{border-width:2px;border-top-width:4px;padding:20px 24px;}
.stat-tile--destacado.stat-tile--terracotta{border-color:var(--danger);}
.stat-tile--destacado.stat-tile--sage{border-color:var(--success);}
.stat-tile--destacado .stat-value{font-size:2.1rem;}