/* Plantilla carta — Fichas dobladas (Navistar) — OFFLINE */

:root{
  --letter-w: 8.5in;
  --letter-h: 11in;

  --pad: 0.5in;          /* margen interno para que no se corte al imprimir */
  --line: #cfcfcf;       /* líneas de división */
  --outer: #c0c0c0;      /* borde exterior */
  --brand: #0b6b57;      /* verde de marca */
  --muted: #777;

  --icon-size: 36px;
  --icon-gap: var(--icon-gap);
  --icons-minh: 38px;

  --es-size: 16px;
  --en-size: 11px;
  --kcal-size: 13px;

  --front-gap: var(--front-gap);
  --front-pad-top: 10px;
  --front-pad-bottom: 8px;

  --brand-mt: 8px;
  --brand-text-size: 10px;
  --brand-letter: 2px;

  --back-brand-top: 14mm;

}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f3f3f3;
  color:#111;
}

.pages{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  align-items:center;
  padding-top: 26px; /* espacio extra por barra fija */
}

/* Sticky shell */
.stickyShell{
  position: sticky;
  top: 0;
  z-index: 30;
  background:#fff;
  border-bottom: 1px solid #e6e6e6;
}

/* Topbar */
.topbar{
  background:transparent;
  padding: 14px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.h1{font-weight: 900; letter-spacing:.3px}
.sub{color:#444; font-size: 12.5px; margin-top: 4px; max-width: 880px}
.topbar__actions{display:flex; gap: var(--icon-gap); align-items:center; flex-wrap:wrap}
.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #d7d7d7;
  background:#fff;
  cursor:pointer;
  font-weight: 800;
}
.btn:hover{filter:brightness(.98)}
.btn--primary{background:#111;color:#fff;border-color:#111}
.btn--ghost{background:#fff}
.btn--danger{background:#fff;border-color:#ffb9b9;color:#9b1c1c}

/* Controls */
.controls{
  background:#fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 12px 14px;
  max-width: 980px;
  width: calc(var(--letter-w) + 1.2in);
  margin: 0 18px 14px;
}
.controls__row{
  display:flex;
  gap: 14px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.controlsGrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items:start;
}
.controlsGrid__left .chatDock{ margin-top: 0; }
@media (max-width: 980px){
  .controlsGrid{ grid-template-columns: 1fr; }
}

.controls__field{flex: 1 1 520px; min-width: 320px}
.label2{font-weight: 900; font-size: 12px; letter-spacing:.2px}
.dishSelect{
  margin-top: 6px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #cfcfcf;
  font-size: 13px;
  background:#fff;
}
.hint{margin-top: 6px; color:#666; font-size: 12px}
.controls__buttons{display:flex; gap: var(--icon-gap); align-items:center}
.controls__status{min-width: 140px}
.statusText{font-weight: 900; font-size: 12px; color:#333}

/* Page and grid (5 renglones fijos) */
.page{
  width: var(--letter-w);
  height: var(--letter-h);
  background:#fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-radius: 14px;
  overflow:hidden;
}

.sheetWrap{
  width: 100%;
  height: 100%;
  padding: var(--pad);
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.sheetGrid{
  width: calc(var(--letter-w) - (2 * var(--pad)));
  height: calc(var(--letter-h) - (2 * var(--pad)) - 0.22in); /* colchón para Chrome */
  border: 1px solid var(--outer);
  display:flex;
  flex-direction:column;
  background:#fff;
}

.stripRow{
  flex: 1 1 0;
  min-height: 0;
  display:grid;
  grid-template-columns: 1fr 1fr; /* mitad y mitad exacto para doblar */
}
.stripRow:not(:last-child){border-bottom: 1px solid var(--line);}

.cell{
  position: relative;
  overflow: hidden;
  display:flex;
}
.cell--front{border-right: 1px solid var(--line);}

/* Front content layout */
.frontContent{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: var(--front-pad-top) 10px var(--front-pad-bottom);
}
.iconsRow{
  display:flex;
  gap: var(--icon-gap);
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  min-height: var(--icons-minh);
}
.iconWrap{
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconWrap img{
  width: var(--icon-size);
  height: var(--icon-size);
  display:block;
}

.dishName{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: var(--es-size);
  text-align:center;
  line-height: 1.05;
  max-width: 95%;
}
.dishEn{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: var(--en-size);
  color: var(--muted);
  text-align:center;
  line-height: 1.05;
  max-width: 95%;
}
.kcalLine{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: var(--kcal-size);
  font-weight: 900;
  color: var(--brand);
}
.brand{
  margin-top: var(--brand-mt);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}
.brandLine{
  width: var(--brand-line-width, 60%);
  border-top: 1px dashed var(--brand);
}
.brandLine--dash{ border-top-style: dashed; }
.brandLine--solid{ border-top-style: solid; }
.brandText{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: var(--brand-letter);
  color: var(--brand);
  font-size: var(--brand-text-size);
}

/* Back */
.backWrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand--back .brandLine{width: var(--brand-line-width, 62%)}

/* Printing */
@page{
  size: letter;
  margin: 0;
}

@media print{
  body{background:#fff}
  .topbar{display:none !important}
  .drawer{display:none !important}
  .modal{display:none !important}

  .no-print{display:none !important}
  .pages{padding:0; gap:0}
  .page{
    box-shadow:none;
    border-radius:0;
    width: var(--letter-w);
    height: var(--letter-h);
  }
  .sheetGrid{
    height: calc(var(--letter-h) - (2 * var(--pad)) - 0.24in);
  }
  /* Asegura ES/EN siempre visible al imprimir */
  .dishName{display:block !important; color:#111 !important;}
  .dishEn{display:block !important; color:#777 !important;}
  .page.printHide{display:none !important;}
}



/* Baja el 'PLATO EXPRESS' del lado derecho (parte trasera) */
.cell--back .brand--back{
  position: relative;
  top: var(--back-brand-top);
}


/* Modal (Administrar platillos) */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 80;
}
.modal[aria-hidden="false"]{display:block;}
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
.modal__panel{
  position: relative;
  max-width: 980px;
  width: calc(100% - 28px);
  margin: 18px auto;
  background:#fff;
  border-radius: 18px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
.modal__header{
  padding: 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--icon-gap);
  border-bottom: 1px solid #efefef;
}
.modal__title{font-weight: 950; font-size: 16px;}
.modal__subtitle{color:#555; font-size: 12px; margin-top: 2px;}

.modal__tabs{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #efefef;
  background:#fafafa;
}
.tab{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background:#fff;
  font-weight: 900;
  cursor:pointer;
}
.tab--active{background:#111;color:#fff;border-color:#111;}

.modal__content{padding: 12px 14px 16px;}
.tabPane{display:none;}
.tabPane--active{display:block;}

.input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #cfcfcf;
  font-size: 13px;
}
.file{margin-top: 8px;}
.row{
  display:flex;
  gap: var(--icon-gap);
  align-items:center;
  flex-wrap:wrap;
}
.row--end{justify-content:flex-end; margin-top: 10px;}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 760px){
  .grid2{grid-template-columns:1fr;}
}

.tableWrap{
  margin-top: 10px;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow:auto;
  max-height: 48vh;
}
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size: 12.5px;
}
.tbl th, .tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align:top;
}
.tbl th{background:#fafafa; text-align:left; font-weight: 950;}
.tbl td:last-child{text-align:right; white-space:nowrap;}
.note{margin-top: 10px; color:#555; font-size: 12px;}

.ioGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){
  .ioGrid{grid-template-columns:1fr;}
}
.card{
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 12px;
  background:#fff;
}
.card__title{font-weight: 950;}
.card__text{color:#555; font-size: 12.5px; margin: 6px 0 10px;}

.btnSmall{padding:7px 10px; border-radius:12px; font-weight:900;}


/* Template toggles */
.hideEnglish .dishEn{display:none !important;}
.hideKcal .kcalLine{display:none !important;}
.hideIcons .iconsRow{display:none !important;}
.hideBrandLine .brandLine{display:none !important;}

/* ===== Usuarios + Permisos ===== */
.userBadge{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background:#fafafa;
}
.userBadge__name{
  font-weight: 950;
  font-size: 12.5px;
  color:#111;
  white-space:nowrap;
}
.modal__panel--small{
  max-width: 560px;
}

.authPane .form{margin-top: 6px;}
.authError{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ffd0d0;
  background: #fff4f4;
  color: #b00020;
  font-weight: 900;
  font-size: 12.5px;
}
.permGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.permItem{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 14px;
  background:#fafafa;
  font-size: 12.5px;
}
.permItem input{margin-top: 2px;}
.card--span2{grid-column: 1 / -1;}

/* ===== Vista previa (Modificar plantilla) ===== */
.tplPreviewRoot{
  border: 1px dashed #ddd;
  border-radius: 16px;
  padding: 12px;
  background: #fafafa;
}
.tplPreviewWrap{
  display:flex;
  justify-content:center;
  overflow:auto;
}
.tplPreviewWrap .stripRow{
  width: 640px;
  height: 170px;
  border: 1px solid #ddd;
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}
.tplPreviewLegend{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 950;
  color:#555;
  text-align:center;
}
.tplPreviewLegend span{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background:#fff;
}

/* ===== Sugerencias (Chat) ===== */
.chatDock{
  margin-top: 10px;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 10px 12px;
  background:#fafafa;
}
.chatDock__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.chatDock__title{
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.2px;
}
.chatDock__actions{display:flex; gap: 8px; align-items:center;}
.chatDock__list{
  margin-top: 8px;
  border: 1px solid #e6e6e6;
  background:#fff;
  border-radius: 12px;
  padding: 8px 10px;
  max-height: 110px;
  overflow:auto;
  font-size: 12.5px;
}
.chatDock--expanded .chatDock__list{max-height: 38vh;}
.chatDock__form{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  align-items:center;
}
.chatDock__form .input{flex:1;}
.chatMsg{
  display:flex;
  gap: 8px;
  align-items:flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
}
.chatMsg:last-child{border-bottom:none;}
.chatMsg__meta{
  font-weight: 950;
  white-space:nowrap;
}
.chatMsg__text{flex:1; color:#111;}
.chatMsg__time{
  color:#777;
  font-size: 11px;
  white-space:nowrap;
}
.chatMsg__del{margin-left: 6px;}

/* ===== Responsive extra (móvil) ===== */
@media (max-width: 760px){
  .topbar{
    padding: 10px 10px;
    flex-direction:column;
    align-items:stretch;
  }
  .topbar__actions{
    width:100%;
    gap: 8px;
  }
  .btn{ padding: 10px 12px; }
  .controls{
    margin: 0 10px 12px;
    width: calc(100% - 20px);
    max-width: none;
    padding: 10px 10px;
  }
  .controls__field{ min-width: 0; }
  .controls__buttons{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .controls__status{ min-width: 0; }
  .pages{
    padding: 10px;
    align-items:flex-start;
    gap: 14px;
  }
  .page{
    border-radius: 12px;
  }
  /* Permite navegar la hoja horizontalmente sin romper layout */
  body{ overflow-x: auto; }
}



/* =========================
   Drawer (Panel desplegable)
   ========================= */
body.drawerOpen{
  overflow: hidden;
}

.drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.drawer[aria-hidden="false"]{
  display: block;
}

.drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.drawer__panel{
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(980px, calc(100vw - 24px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer__header{
  padding: 12px 14px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.drawer__title{
  font-weight: 800;
  letter-spacing: .2px;
}

.drawer__subtitle{
  font-size: 12px;
  color: #666;
  margin-top: 2px;
  max-width: 720px;
}

.drawer__tabs{
  padding: 8px 12px 0 12px;
  border-bottom: 1px solid #e9e9e9;
}

.drawer__content{
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.dtabPane{ display:none; }
.dtabPane--active{ display:block; }

.panelSplit{
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.panelSplit__left{
  flex: 0 0 360px;
  min-width: 300px;
}

.panelSplit__right{
  flex: 1 1 auto;
  min-width: 320px;
  display: flex;
}

#chatSlotPanel, #chatSlotFull{
  flex: 1;
  display: flex;
}

#chatSlotPanel > #chatDock,
#chatSlotFull > #chatDock{
  flex: 1;
}

/* Chat dentro del drawer: que crezca */
.drawer #chatDock{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer #chatDock .chatDock__list{
  flex: 1;
  min-height: 320px;
  overflow: auto;
}

.chatFullWrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.chatFullHeader .h2{
  font-size: 18px;
  font-weight: 800;
}

.chatFullBody{
  flex: 1;
  min-height: 420px;
  display: flex;
}

/* Responsive */
@media (max-width: 900px){
  .drawer__panel{
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0;
  }
  .panelSplit{
    flex-direction: column;
  }
  .panelSplit__left{
    flex: 0 0 auto;
    min-width: 0;
  }
  .panelSplit__right{
    min-width: 0;
  }
  .drawer #chatDock .chatDock__list{
    min-height: 240px;
  }
}



/* ===== v28.3 fixes ===== */

/* Modal plantilla: permite scroll interno para ver todo sin achicar la ventana */
#templateModal .modal__content{
  overflow:auto;
  flex: 1 1 auto;
}

/* Print: imprime SOLO páginas con datos y evita hoja extra al final */
@media print{
  .page{
    page-break-after: always;
    break-after: page;
  }
  .page.printLast{
    page-break-after: auto !important;
    break-after: auto !important;
  }
}




/* v28.4: Evita hoja extra — deja que el flujo natural haga los saltos */
@media print{ .page{ page-break-after: auto !important; break-after: auto !important; } }



/* ===== v28.6: Modales con scroll real (sin zoom-out) ===== */
.modal[aria-hidden="false"]{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modal__panel{
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
}

.modal__header{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.modal__content{
  overflow: auto;
  flex: 1 1 auto;
  max-height: calc(100vh - 140px);
}


/* v28.7: Modales con scroll interno (sin zoom-out) */
.modal{align-items:flex-start;}
.modal__panel{max-height: calc(100vh - 24px); display:flex; flex-direction:column; margin:12px 0;}
.modal__header{flex: 0 0 auto;}
.modal__content{flex: 1 1 auto; overflow:auto;}



/* ===== v28.9: Modales centrados + scroll real (sin zoom-out) ===== */
.modal[aria-hidden="false"]{
  display:flex !important;
  justify-content:center;
  align-items:flex-start;
  overflow:auto;
  padding: 12px 12px 24px;
}
.modal__panel{
  margin: 12px auto !important;
  max-height: calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}
.modal__content{
  flex: 1 1 auto;
  overflow:auto;
}

/* En móviles, un poquito más de aire */
@media (max-width: 520px){
  .modal[aria-hidden="false"]{ padding: 10px 10px 18px; }
}