/* ============================================================
   Menu Scolaire v1.2 – Estilos (Admin + Frontend)
   Paleta: blanco #FFF · granate #8B1A2B · verde #5A8A5A · gris #F5F5F5
   ============================================================ */

:root {
  --ms-granate:   #8B1A2B;
  --ms-granate-d: #6e1422;
  --ms-verde:     #5A8A5A;
  --ms-verde-d:   #45703f;
  --ms-wa-green:  #25D366;
  --ms-gris:      #F5F5F5;
  --ms-gris-m:    #e0e0e0;
  --ms-gris-d:    #999;
  --ms-blanco:    #FFFFFF;
  --ms-texto:     #2c2c2c;
  --ms-sombra:    rgba(0,0,0,.10);
  --ms-radio:     10px;
  --ms-gap:       16px;
}

.ms-wrapper *,
.ms-admin-wrap * { box-sizing: border-box; }

/* ============================================================
   ADMIN – General
   ============================================================ */
.ms-admin-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ms-texto); }
.ms-admin-title { display:flex;align-items:center;gap:10px;color:var(--ms-granate)!important;border-bottom:3px solid var(--ms-granate);padding-bottom:10px; }
.ms-admin-dashboard { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ms-gap);margin:20px 0; }
.ms-dash-card { background:var(--ms-blanco);border:1px solid var(--ms-gris-m);border-top:4px solid var(--ms-granate);border-radius:var(--ms-radio);padding:20px;box-shadow:0 2px 8px var(--ms-sombra); }
.ms-dash-card h2 { margin-top:0;color:var(--ms-granate);font-size:1.05em; }
.ms-admin-card { background:var(--ms-blanco);border:1px solid var(--ms-gris-m);border-radius:var(--ms-radio);padding:20px 24px;margin:20px 0;box-shadow:0 2px 6px var(--ms-sombra); }
.ms-admin-card h2,.ms-admin-card h3 { color:var(--ms-granate);margin-top:0; }
.ms-admin-table th { background:var(--ms-granate);color:#fff;font-weight:600; }
.ms-badge { display:inline-block;padding:2px 8px;border-radius:12px;font-size:.8em;font-weight:600; }
.ms-badge-ok { background:#d4edda;color:#155724; }
.ms-badge-no { background:#f8d7da;color:#721c24; }
.ms-badge-vacation { background:#fff3cd;color:#856404; }
.ms-empty { color:var(--ms-gris-d);font-style:italic;padding:10px 0; }
.ms-week-card { border-left:4px solid var(--ms-granate);background:var(--ms-gris);border-radius:0 var(--ms-radio) var(--ms-radio) 0;margin:12px 0;padding:16px 20px; }
.ms-week-card h2,.ms-week-card h3 { margin-top:0;color:var(--ms-granate); }
.ms-days-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px; }
.ms-day-col { background:var(--ms-blanco);border-radius:8px;padding:12px;border:1px solid var(--ms-gris-m); }
.ms-day-col h3 { font-size:.9em;color:var(--ms-granate);border-bottom:2px solid var(--ms-granate);padding-bottom:4px;margin-bottom:10px; }
.ms-empty-day { color:var(--ms-gris-d);font-style:italic;font-size:.85em; }
.ms-dish-row { background:#fff;border:1px solid var(--ms-gris-m);border-radius:6px;padding:8px 10px;margin-bottom:8px; }
.ms-dish-row.ms-from-library { border-color:#aad4aa; }
.ms-dish-name { font-size:.88em;font-weight:600;color:var(--ms-texto);margin-bottom:5px;display:block; }
.ms-cal { font-weight:400;color:var(--ms-gris-d);font-size:.78em;margin-left:5px; }
.ms-lib-badge { font-size:.8em;margin-left:4px;cursor:help; }
.ms-vacation-note { background:#fff3cd;border:1px solid #ffc107;border-radius:6px;padding:8px 12px;color:#856404;font-style:italic; }
.ms-admin-help { margin:30px 0; }
.ms-wed-card { border-left:4px solid var(--ms-verde); }

/* ── Alérgenos checkboxes (admin) ─────────────────────────── */
.ms-allergen-checkboxes { display:flex;flex-wrap:wrap;gap:4px;margin-top:6px; }
.ms-cb-label { display:inline-flex;align-items:center;cursor:pointer;user-select:none;position:relative; }
.ms-cb-label input[type="checkbox"] { position:absolute;opacity:0;width:0;height:0; }
/* Icono en grisáceo cuando no marcado; colorido+ampliado cuando marcado.
   El estado visual se basa SOLO en :checked — sin depender de clases JS.
   pointer-events:none en el icono y el SVG garantiza que todos los clics
   atraviesen el icono y lleguen al <label>, que activa el checkbox. */
.ms-cb-icon { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;filter:grayscale(1) opacity(0.35);transition:filter .15s,transform .12s;pointer-events:none; }
.ms-cb-icon svg { width:28px;height:28px;pointer-events:none; }
.ms-cb-label input:checked + .ms-cb-icon { filter:none;transform:scale(1.12); }
.ms-cb-label:hover .ms-cb-icon { filter:grayscale(0.5) opacity(0.6); }
.ms-cb-label:has(input:checked):hover .ms-cb-icon { filter:none; }

/* ── Leyenda de alérgenos ─────────────────────────────────── */
.ms-allergen-legend { background:var(--ms-gris);border-radius:8px;padding:10px 14px;margin:12px 0 20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82em; }
.ms-allergen-legend .ms-allergen { width:22px;height:22px; }

/* ── Estadísticas biblioteca ──────────────────────────────── */
.ms-lib-stats { display:flex;gap:20px;background:var(--ms-gris);border-radius:8px;padding:12px 16px;margin:12px 0;font-size:.9em; }
.ms-lib-stats span { color:var(--ms-texto); }
.ms-lib-table .ms-allergen-checkboxes { flex-wrap:nowrap; }
.ms-lib-preview { margin-top:4px;min-height:20px; }
.ms-lib-preview .ms-allergens { gap:2px; }

/* ── Settings: vista previa de fondo ─────────────────────── */
.ms-image-picker { display:flex;flex-direction:column;gap:8px;align-items:flex-start; }
.ms-color-picker { width:80px!important; }
#ms-header-preview { padding:16px 20px;border-radius:8px;pointer-events:none; }
#ms-header-preview .ms-title { font-size:1.2em; }

/* ============================================================
   FRONTEND – Base
   ============================================================ */
.ms-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ms-texto);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8px;
}

/* Cabecera */
.ms-header { color:var(--ms-blanco);border-radius:var(--ms-radio) var(--ms-radio) 0 0;padding:18px 24px 14px; }
.ms-header-top { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px; }
.ms-title { margin:0 0 10px;font-size:1.55em;font-weight:700;letter-spacing:.02em;color:var(--ms-blanco); }

/* Idioma */
.ms-lang-toggle { display:flex;gap:6px; }
.ms-lang-btn { display:inline-block;padding:5px 14px;border-radius:20px;font-size:.83em;font-weight:700;color:rgba(255,255,255,.8);background:rgba(255,255,255,.15);text-decoration:none;border:2px solid transparent;transition:all .2s; }
.ms-lang-btn.active { color:var(--ms-granate);background:var(--ms-blanco);border-color:var(--ms-blanco); }
.ms-lang-btn:hover:not(.active) { background:rgba(255,255,255,.3);color:#fff;text-decoration:none; }

/* Acciones del header */
.ms-header-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

/* Botón miércoles */
.ms-miercoles-btn { display:inline-block;padding:8px 16px;background:var(--ms-verde);color:#fff;border-radius:20px;text-decoration:none;font-weight:700;font-size:.88em;border:2px solid rgba(255,255,255,.3);transition:background .2s,transform .15s;box-shadow:0 2px 6px rgba(0,0,0,.2); }
.ms-miercoles-btn:hover { background:var(--ms-verde-d);text-decoration:none;color:#fff;transform:translateY(-1px); }

/* Botón imprimir */
.ms-print-btn { display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:20px;font-size:.85em;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap; }
.ms-print-btn:hover { background:rgba(255,255,255,.3); }

/* Botón WhatsApp – con icono SVG */
.ms-whatsapp-btn { display:inline-flex;align-items:center;gap:6px;padding:7px 15px;background:var(--ms-wa-green);color:#fff;border-radius:20px;text-decoration:none;font-size:.85em;font-weight:700;border:2px solid rgba(255,255,255,.3);transition:background .2s,transform .15s;white-space:nowrap;line-height:1; }
.ms-whatsapp-btn svg { flex-shrink:0;display:block; }
.ms-whatsapp-btn:hover { background:#1da851;text-decoration:none;color:#fff;transform:translateY(-1px); }

/* Selector de período */
.ms-period-selector { display:flex;align-items:center;gap:8px;font-size:.88em;color:rgba(255,255,255,.85); }
.ms-period-selector select { padding:4px 8px;border-radius:6px;border:none;font-size:.93em;background:rgba(255,255,255,.9);color:var(--ms-granate);font-weight:600;cursor:pointer; }

/* ── Nota ecológica – negrita, cursiva, visible ──────────── */
.ms-organic-note { margin:0;padding:8px 14px;font-size:.95rem;color:#555;font-style:italic;font-weight:700;text-align:center;background:var(--ms-gris);border-bottom:1px solid var(--ms-gris-m); }

/* ── Etiqueta de semana (solo en print) ─────────────────── */
.ms-print-week-label { display:none; }

/* ── Navegación semanas ─────────────────────────────────── */
.ms-week-nav { display:flex;flex-wrap:wrap;gap:6px;background:var(--ms-granate-d);padding:10px 20px; }
.ms-week-btn { padding:6px 16px;border:2px solid rgba(255,255,255,.4);border-radius:20px;background:transparent;color:rgba(255,255,255,.8);font-size:.83em;font-weight:600;cursor:pointer;transition:all .2s; }
.ms-week-btn:hover { background:rgba(255,255,255,.15);color:#fff; }
.ms-week-btn.active { background:var(--ms-blanco);color:var(--ms-granate);border-color:var(--ms-blanco); }

/* Pestañas de meses */
.ms-month-tabs { display:flex;flex-wrap:wrap;gap:6px;margin-top:10px; }
.ms-month-tab { padding:6px 16px;border:2px solid rgba(255,255,255,.4);border-radius:20px;background:transparent;color:rgba(255,255,255,.8);font-size:.88em;font-weight:600;cursor:pointer;transition:all .2s; }
.ms-month-tab.active { background:var(--ms-blanco);color:var(--ms-granate);border-color:var(--ms-blanco); }
.ms-month-tab:hover:not(.active) { background:rgba(255,255,255,.15);color:#fff; }

/* Visibilidad controlada por JS */
.ms-week-hidden,.ms-month-hidden { display:none; }
.ms-week-visible,.ms-month-visible { display:block; }

/* ── Grid de días ─────────────────────────────────────────── */
.ms-week > .ms-days-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:14px;
  background:var(--ms-gris);
  border-radius:0 0 var(--ms-radio) var(--ms-radio);
}
@media(max-width:800px){ .ms-week > .ms-days-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .ms-week > .ms-days-grid { grid-template-columns:1fr; } }

.ms-day-card { background:var(--ms-blanco);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px var(--ms-sombra);display:flex;flex-direction:column; }
.ms-day-header { background:var(--ms-granate);color:#fff;padding:10px 14px;display:flex;align-items:baseline;gap:8px; }
.ms-day-name { font-weight:700;font-size:.88em;text-transform:uppercase;letter-spacing:.05em; }
.ms-day-num { font-size:1.3em;font-weight:800;opacity:.85; }

.ms-dishes { list-style:none;margin:0;padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:6px; }
.ms-dish { padding-bottom:6px;border-bottom:1px solid var(--ms-gris-m); }
.ms-dish:last-child { border-bottom:none;padding-bottom:0; }
.ms-dish-empty { color:var(--ms-gris-d);font-style:italic;text-align:center;padding:12px 0;font-size:.88em; }

/* Nombres de platos en MAYÚSCULAS (solo frontend) */
.ms-wrapper .ms-dish-name { display:block;font-size:.86em;color:var(--ms-texto);line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em; }

/* ── Calorías: siempre al fondo de la tarjeta ────────────── */
.ms-day-cal-total {
  padding:6px 12px 9px;
  font-size:.75em;
  color:var(--ms-gris-d);
  border-top:1px solid var(--ms-gris-m);
  text-align:right;
  font-style:italic;
  margin-top:auto;
}

/* ── Iconos SVG de alérgenos (frontend) ─────────────────── */
.ms-allergens { display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;margin-bottom:8px; }

.ms-allergen {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  flex-shrink: 0 !important;
  cursor: help;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.ms-allergen svg { width:24px !important; height:24px !important; max-width:24px !important; display:block !important; }

/* ── Leyenda de alérgenos por semana ─────────────────────── */
.ms-allergen-legend-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  background: #F5F5F5;
  padding: 8px 14px;
  border-top: 1px solid #e0e0e0;
  margin-top: 20px;
  font-size: 0.85rem;
  color: #555;
}
.ms-allergen-legend-title {
  font-weight: 700;
  color: #444;
  white-space: nowrap;
  margin-right: 2px;
}
.ms-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ms-legend-icon {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.ms-legend-icon svg { width:20px !important; height:20px !important; max-width:20px !important; display:block !important; }

/* ── Vacaciones ─────────────────────────────────────────── */
.ms-vacation-block { text-align:center;padding:36px 20px;background:linear-gradient(135deg,#fff9e6,#fff3cd);border-radius:0 0 var(--ms-radio) var(--ms-radio);border:2px dashed #f0c040; }
.ms-vacation-icon { font-size:3em;margin-bottom:8px; }
.ms-vacation-text { font-size:1.2em;font-weight:700;color:#856404;margin:0; }
.ms-vacation-small { padding:10px 14px;display:flex;align-items:center;gap:8px;border-radius:8px;margin:4px 0; }
.ms-vacation-small .ms-vacation-icon { font-size:1.4em;margin:0; }
.ms-vacation-small .ms-vacation-text { font-size:.95em;margin:0; }

/* ── Menú Miércoles ─────────────────────────────────────── */
.ms-month { background:var(--ms-gris);border-radius:0 0 var(--ms-radio) var(--ms-radio);padding:14px; }
.ms-wed-list { display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px; }
.ms-wed-card { background:var(--ms-blanco);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px var(--ms-sombra);display:flex;flex-direction:column; }
.ms-wed-card.ms-wed-vacation { opacity:.82; }
.ms-wed-header { background:var(--ms-verde);color:#fff;padding:10px 14px; }
.ms-wed-label { font-weight:700;font-size:.88em;text-transform:uppercase;letter-spacing:.04em; }
.ms-wed-card .ms-dishes { padding:10px 12px; }

/* ── Estado vacío ───────────────────────────────────────── */
.ms-empty-state { background:var(--ms-gris);border-radius:var(--ms-radio);padding:40px;text-align:center;color:var(--ms-gris-d);font-size:1em;border:2px dashed var(--ms-gris-m); }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:600px){
  .ms-header { padding:12px 12px 10px; }
  .ms-title { font-size:1.2em; }
  .ms-header-actions { gap:5px; }
  .ms-miercoles-btn,.ms-print-btn,.ms-whatsapp-btn { font-size:.78em;padding:6px 10px; }
  .ms-admin-dashboard { grid-template-columns:1fr; }
}

/* ============================================================
   IMPRESIÓN (@media print) – Vista limpia A4
   ============================================================ */
@media print {
  /* ── 0. Forzar colores de fondo y SVG en color ────────── */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust:         exact !important;
    color-adjust:               exact !important;
  }

  /* ── 1. Ocultar absolutamente TODO el sitio ───────────── */
  body * { visibility: hidden !important; }

  /* ── 2. Mostrar solo el wrapper del menú ─────────────── */
  .ms-wrapper,
  .ms-wrapper * { visibility: visible !important; }

  .ms-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── 3. Ocultar controles dentro del wrapper ─────────── */
  .ms-header-top,
  .ms-period-selector,
  .ms-week-nav,
  .ms-organic-note,
  .ms-month-tabs,
  .ms-print-btn,
  .ms-whatsapp-btn,
  .ms-miercoles-btn,
  .no-print {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── 4. Ocultar semanas/meses no activos ─────────────── */
  .ms-week-hidden,
  .ms-month-hidden { display: none !important; }

  /* ── 5. Cabecera: solo el título ─────────────────────── */
  .ms-header {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 2px solid #333 !important;
    border-radius: 0 !important;
    padding: 6px 0 6px !important;
  }
  .ms-title {
    color: #000 !important;
    font-size: 1.3em !important;
    margin: 0 0 2px !important;
  }

  /* ── 6. Etiqueta de semana ───────────────────────────── */
  .ms-print-week-label {
    display: block !important;
    visibility: visible !important;
    font-size: .9em;
    font-weight: 700;
    color: #333;
    padding: 4px 0 6px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 6px;
    letter-spacing: .02em;
  }

  /* ── 7. Grid de días: forzar 4 columnas ──────────────── */
  .ms-week > .ms-days-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    padding: 6px 0 !important;
    background: #fff !important;
  }

  /* ── 8. Tarjetas de día ──────────────────────────────── */
  .ms-day-card {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    break-inside: avoid;
  }
  .ms-day-header {
    background: #eee !important;
    color: #000 !important;
    padding: 6px 8px !important;
  }
  .ms-day-name { font-size: .8em !important; }
  .ms-day-num  { font-size: 1.1em !important; }

  /* ── 9. Platos ───────────────────────────────────────── */
  .ms-wrapper .ms-dish-name { font-size: .75em !important; }
  .ms-dishes { padding: 6px 8px !important; gap: 3px !important; }
  .ms-dish   { padding-bottom: 3px !important; }

  /* ── 10. Calorías ────────────────────────────────────── */
  .ms-day-cal-total { font-size: .68em !important; padding: 3px 6px 5px !important; }

  /* ── 11. Alérgenos: reemplazar SVG por nombre en texto── */
  .ms-allergens {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin-top: 3px !important;
  }
  .ms-allergen {
    width: auto !important;
    height: auto !important;
    border-radius: 2px !important;
    background: #efefef !important;
    overflow: visible !important;
    padding: 1px 3px !important;
  }
  .ms-allergen svg { display: none !important; }
  /* body.printing sobrescribe las reglas anteriores — ver bloque final */
  .ms-allergen::after {
    content: attr(title);
    font-size: 6.5pt;
    font-weight: 700;
    color: #333 !important;
    display: block;
    white-space: nowrap;
    line-height: 1.4;
    visibility: visible !important;
  }

  /* ── 12. Vacaciones ──────────────────────────────────── */
  .ms-vacation-block { border: 1px solid #ccc !important; background: #f9f9f9 !important; }

  /* ── 13. Menú miércoles ──────────────────────────────── */
  .ms-wed-header { background: #eee !important; color: #000 !important; }
  .ms-wed-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }

  /* ── 14. Página A4 apaisada ──────────────────────────── */
  @page { size: A4 landscape; margin: 10mm 12mm; }
  body { font-size: 9pt !important; }
}

/* ============================================================
   IMPRESIÓN v2 – body.printing: clon del menú activo
   Usa display:none para eliminar todo el sitio del flujo,
   y muestra solo #ms-print-area en posición estática.
   ============================================================ */
#ms-print-area { display: none; }

@media print {
  html, body { height: auto !important; overflow: visible !important; }
  body.printing > *:not(#ms-print-area) { display: none !important; }
  body.printing #ms-print-area {
    display:    block   !important;
    position:   static  !important;
    width:      100%    !important;
    background: #fff    !important;
  }
  body.printing #ms-print-area * { visibility: visible !important; }

  /* Estilos del menú dentro del área de impresión */
  body.printing #ms-print-area .ms-header {
    background: #fff !important; color: #000 !important;
    border-bottom: 2px solid #333 !important; border-radius: 0 !important;
    padding: 6px 0 !important;
  }
  body.printing #ms-print-area .ms-title { color: #000 !important; font-size: 1.3em !important; }
  body.printing #ms-print-area .ms-print-week-label { display: block !important; }
  body.printing #ms-print-area .ms-week > .ms-days-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important; padding: 6px 0 !important; background: #fff !important;
  }
  body.printing #ms-print-area .ms-day-card { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: avoid; }
  body.printing #ms-print-area .ms-day-header { background: #eee !important; color: #000 !important; padding: 6px 8px !important; }
  body.printing #ms-print-area .ms-wrapper .ms-dish-name { font-size: .75em !important; }
  body.printing #ms-print-area .ms-day-cal-total { font-size: .68em !important; padding: 3px 6px 5px !important; }
  /* Alérgenos: mostrar SVG en color, sin texto fallback */
  body.printing #ms-print-area .ms-allergen {
    width: 24px !important; height: 24px !important;
    border-radius: 50% !important; overflow: hidden !important;
    background: transparent !important; padding: 0 !important;
  }
  body.printing #ms-print-area .ms-allergen svg { display: block !important; width: 24px !important; height: 24px !important; max-width: 24px !important; }
  body.printing #ms-print-area .ms-legend-icon svg { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; }
  body.printing #ms-print-area .ms-allergen::after { content: none !important; display: none !important; }
  body.printing #ms-print-area .ms-wed-header { background: #eee !important; color: #000 !important; }
  body.printing #ms-print-area .ms-wed-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
}