/* Ilustraciones del producto: piezas de interfaz dibujadas con HTML y CSS. */

/* Estados: color, icono y texto a la vez, como en la aplicación */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  white-space: nowrap;
  background: var(--fondo-alt);
  color: var(--texto-suave);
}
.estado .icono { width: 13px; height: 13px; stroke-width: 2.25; }
.estado--ok { background: var(--ok-fondo); color: var(--ok); }
.estado--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.estado--peligro { background: var(--peligro-fondo); color: var(--peligro); }
.estado--info { background: var(--info-fondo); color: var(--info); }
.estado--primario { background: var(--primario-suave); color: var(--primario); }
.estado--cobre { background: var(--cobre-suave); color: var(--cobre-texto); }

/* Marco de ilustración: superficie clara aunque esté en una banda oscura */
.pantalla {
  --fondo: #ffffff;
  --fondo-alt: #f3f4f0;
  --superficie: #ffffff;
  --superficie-2: var(--producto-superficie-secundaria);
  --cabecera-producto: #edf3f1;
  --texto: #183b40;
  --texto-suave: #50666a;
  --borde: #dce3df;
  --borde-fuerte: #c3d3d0;
  --borde-control: #78918f;
  --primario: #00777f;
  --primario-hover: #00646b;
  --sobre-primario: #ffffff;
  --primario-suave: #e2f1f1;
  --foco: #00777f;
  --cobre: #bd8051;
  --cobre-texto: #93582b;
  --cobre-suave: #f6ebe1;
  --ok: #147849;
  --ok-fondo: #e8f6ee;
  --aviso: #875a0c;
  --aviso-fondo: #fff4dc;
  --peligro: #af393d;
  --peligro-fondo: #fdecee;
  --info: #236c99;
  --info-fondo: #e9f4fc;
  --r-s: 6px;
  --r-m: 8px;
  --r-l: 16px;
  --sombra: 0 1px 3px rgb(4 28 32 / 5%);
  --sombra-alta: 0 2px 4px rgb(4 28 32 / 4%), 0 20px 48px -24px rgb(4 28 32 / 28%);
  color-scheme: light;
  position: relative;
  min-width: 0;
  border-radius: var(--r-l);
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.6;
}
.pantalla small { font-size: 0.75rem; line-height: 1.45; }
.pantalla__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--borde);
  background: var(--cabecera-producto);
  font-weight: 600;
}
.pantalla__barra small { font-size: 0.75rem; font-weight: 500; color: var(--texto-suave); text-align: right; }
.pantalla__cuerpo { padding: 20px; }
.pantalla__pie { padding: 12px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-suave); font-size: 0.8125rem; }

/* Planificación de cocina en franjas */
.franjas { display: grid; gap: 12px; min-width: 460px; }
.franja { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: center; }
.franja__puesto { font-size: 0.8125rem; font-weight: 600; color: var(--texto-suave); }
.franja__pista { position: relative; height: 42px; border-radius: 6px; background: var(--fondo-alt); }
.franja__tarea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--desde, 0%);
  width: var(--ancho, 50%);
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--primario-suave);
  border: 1px solid #c5dedb;
  border-left: 3px solid var(--primario);
  color: var(--texto);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.franja__tarea--cobre { background: var(--cobre-suave); border-color: #e7d2be; border-left-color: var(--cobre-texto); }
.franja__tarea--retenida { background: var(--superficie-2); border: 1px solid var(--borde); border-left: 3px solid var(--texto-suave); color: var(--texto-suave); }
.escala { display: grid; min-width: 460px; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; margin-top: 8px; font-size: 0.75rem; color: var(--texto-suave); }
.escala div { display: flex; justify-content: space-between; }
.motivo { display: flex; gap: 6px; align-items: flex-start; margin-top: 12px; font-size: 0.8125rem; color: var(--texto-suave); }
.motivo .icono { width: 14px; height: 14px; margin-top: 2px; color: var(--cobre); }
/* Escandallo con peso de cada componente */
.escandallo { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.escandallo th { padding: 0 10px 10px; text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
.escandallo td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.escandallo th:first-child, .escandallo td:first-child { padding-left: 0; }
.escandallo th:last-child, .escandallo td:last-child { padding-right: 0; }
.escandallo .num { text-align: right; white-space: nowrap; }
.escandallo__peso { display: grid; gap: 4px; min-width: 120px; }
.escandallo__peso b { font-weight: 600; }
.escandallo tfoot td { border-bottom: 0; font-weight: 700; }

/* Disponibilidad de platos */
.platos-lista { display: grid; list-style: none; }
.platos-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.platos-lista li:last-child { border-bottom: 0; }
.platos-lista strong { font-weight: 600; }
.platos-lista small { display: block; color: var(--texto-suave); }

/* Lotes */
.lotes { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lotes th { padding: 0 8px 10px; text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
.lotes td { padding: 12px 8px; border-bottom: 1px solid var(--borde); }
.lotes th:first-child, .lotes td:first-child { padding-left: 0; }
.lotes th:last-child, .lotes td:last-child { padding-right: 0; text-align: right; }

/* Cuenta dividida */
.reparto { display: grid; gap: 0; list-style: none; }
.reparto li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.reparto li:first-child { padding-top: 0; }
.reparto li:last-child { border-bottom: 0; }
.reparto .cifra { font-weight: 700; }
.reparto__total { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--borde-fuerte); font-size: 1rem; font-weight: 700; }

/* Ficha de cliente */
.ficha-cliente__cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ficha-cliente__avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--cobre-suave); color: var(--cobre-texto); font-weight: 700; }
.ficha-cliente dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.ficha-cliente dt { color: var(--texto-suave); }
.ficha-cliente dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Comparación por zonas */
.zonas-mini { display: grid; gap: 14px; }
.zona-mini__cabecera { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-weight: 600; }
.zona-mini__cabecera small { font-weight: 500; color: var(--texto-suave); }
.zona-mini__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zona-mini__datos div { display: grid; gap: 4px; font-size: 0.75rem; color: var(--texto-suave); }
.zona-mini__datos b { color: var(--texto); font-size: 0.875rem; }

/* Comparador de precios */
.precios-mini { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.precios-mini th { padding: 0 8px 10px; text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
.precios-mini td { padding: 12px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.precios-mini th:first-child, .precios-mini td:first-child { padding-left: 0; }
.precios-mini small { display: block; color: var(--texto-suave); }
.precios-mini .num { text-align: right; white-space: nowrap; }
.precios-mini tr.mejor td { background: var(--ok-fondo); }
.precios-mini tr.mejor td:first-child { box-shadow: inset 3px 0 0 var(--ok); padding-left: 10px; }

/* Ticket fiscal */
.ticket-fiscal {
  --fondo: #ffffff;
  --texto: #103c43;
  --texto-suave: #56696b;
  --borde: #dfe7e5;
  position: relative;
  width: min(340px, 100%);
  margin: 0 auto;
  padding: 26px 24px 30px;
  background: #fffdf8;
  color: #1b2b2e;
  border-radius: 4px;
  box-shadow: var(--sombra-alta);
  font-size: 0.8125rem;
  line-height: 1.55;
  transform: rotate(-0.75deg);
}
.ticket-fiscal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 7px;
  background: radial-gradient(circle at 7px 0, #fffdf8 6px, transparent 6.5px) 0 0 / 14px 7px repeat-x;
}
.ticket-fiscal__centro { text-align: center; color: #56696b; font-size: 0.75rem; }
.ticket-fiscal hr { border: 0; border-top: 1px dashed #b9cbc8; margin: 12px 0; }
.ticket-fiscal__linea { display: flex; justify-content: space-between; gap: 10px; }
.ticket-fiscal__total { font-weight: 700; font-size: 1rem; }
.ticket-fiscal__qr { display: grid; justify-items: center; gap: 6px; margin-top: 16px; text-align: center; font-size: 0.75rem; color: #56696b; }
.ticket-fiscal__qr svg { width: 104px; height: 104px; }
.ticket-fiscal__qr strong { color: #1b2b2e; letter-spacing: 0.04em; }

/* Simulador del escandallo */
.simulador { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.simulador__controles { display: grid; gap: 18px; }
.control-rango { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--superficie); transition: border-color var(--transicion), box-shadow var(--transicion); }
.control-rango:focus-within { border-color: var(--primario); box-shadow: var(--sombra); }
.control-rango label { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.control-rango output { color: var(--primario); }
.control-rango small { color: var(--texto-suave); font-size: 0.8125rem; }
.control-rango input[type="range"] { display: block; width: 100%; min-width: 0; min-height: 32px; margin: 0; border-radius: 6px; cursor: pointer; accent-color: var(--primario); }
.simulador__resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.simulador__resumen div { padding: 12px 14px; border-radius: var(--r-m); background: var(--fondo-alt); }
.simulador__resumen span { display: block; margin-bottom: 2px; font-size: 0.75rem; color: var(--texto-suave); }
.simulador__resumen b { font-family: var(--f-titulo); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.simulador__resumen .es-mejor b { color: var(--ok); }

/* La tabla conserva espacio suficiente también en tablet y en paneles estrechos. */
.pantalla__cuerpo:has(> table), .pantalla__cuerpo:has(> .franjas), .desplazable { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) var(--superficie-2); }
.pantalla__cuerpo:focus-visible, .desplazable:focus-visible { outline-offset: -4px; }

@media (max-width: 900px) {
  .simulador { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .pantalla { --r-l: 12px; }
  .lotes .ocultar-movil { display: none; }
  .ficha-cliente .estado { white-space: normal; }
  .pantalla__barra { padding: 14px 16px; }
  .pantalla__cuerpo { padding: 16px; }
  .pantalla__pie { padding: 12px 16px; }
  .simulador__resumen { grid-template-columns: 1fr 1fr; }
  .escandallo__peso { min-width: 84px; }
  .escandallo .ocultar-movil { display: none; }
}

/* Matriz de roles y áreas */
.matriz th, .matriz td { text-align: center; padding-left: 4px; padding-right: 4px; }
.lotes.matriz th:first-child, .lotes.matriz td:first-child { text-align: left; white-space: nowrap; }
.lotes.matriz th:last-child, .lotes.matriz td:last-child { text-align: center; }
.matriz .icono { width: 18px; height: 18px; margin: 0 auto; color: var(--ok); stroke-width: 2; }
@media (max-width: 640px) { .matriz { min-width: 420px; font-size: 0.8125rem; } .matriz th { font-size: 0.75rem; } }