/* Interfaz V3 · extensión de V2 al sistema completo.
   Solo presentación en pantalla. No cambia dimensiones de impresión ni controles. */
@media screen {
 :root {
  --ea3-field:#ffffff;
  --ea3-focus:#5478c8;
  --ea3-primary:#4267b5;
  --ea3-primary-end:#365997;
  --ea3-panel-edge:#dce4f2;
  --ea3-selection:#dce7ff;
  --ea3-danger:#b33146;
 }
 .night {
  --ea3-field:var(--field);
  --ea3-focus:#a8bfed;
  --ea3-primary:#465a72;
  --ea3-primary-end:#3c5069;
  --ea3-panel-edge:var(--line);
  --ea3-selection:var(--row);
  --ea3-danger:#ff9ca8;
 }
 .night.theme-grey {--ea3-primary:#4c5e79;--ea3-primary-end:#3f5068;--ea3-focus:#c4d0e6}
 .night.theme-wine {--ea3-primary:#684c58;--ea3-primary-end:#593e4a;--ea3-focus:#dbb2c3}
 /* Las tarjetas no reciben transformaciones ni filtros: los menús flotantes
    conservan su sistema de coordenadas y los buscadores su desplazamiento. */
 :is(#content,#modal,.login) .card,
 :is(#content,#modal) .stat {
  background:linear-gradient(125deg,var(--ea2-wash-alt),transparent 70%),var(--ea2-glass)!important;
  border:1px solid var(--ea3-panel-edge);
  border-radius:16px;
  box-shadow:inset 0 1px 0 var(--ea2-top),0 5px 20px var(--ea2-glow);
 }
 :is(#content,#modal) .stat {
  background:linear-gradient(130deg,var(--ea2-wash),transparent 75%),var(--ea-surface)!important;
  border-radius:13px;
 }
 :is(#content,#modal) .stat:nth-child(3n+2) {
  background:linear-gradient(130deg,var(--ea2-wash-alt),transparent 75%),var(--ea-surface)!important;
 }
 :is(#content,#modal) .stat strong {font-weight:650;letter-spacing:-.35px}
 :is(#content,#modal,.login) h2,
 :is(#content,#modal,.login) h3 {
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-weight:700;
  letter-spacing:-.25px;
  color:var(--ea2-title);
 }
 :is(#content,#modal,.login) label {color:var(--ea-muted);font-weight:500}
 :is(#content,#modal,.login) .muted {color:var(--ea-muted)}
 /* No se fijan anchos ni alturas para conservar selectores P1-P3,
    flechas de cantidad y formularios con tamaños propios. */
 :is(#content,#modal,.login,.price-menu,.date-picker-panel) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
 :is(#content,#modal,.login,.price-menu,.date-picker-panel) select,
 :is(#content,#modal,.login) textarea {
  background:var(--ea3-field)!important;
  border-color:var(--ea3-panel-edge)!important;
  box-shadow:inset 0 1px 3px var(--ea2-shade);
  color:var(--ea-ink)!important;
  transition:border-color 150ms ease,box-shadow 150ms ease;
 }
 :is(#content,#modal,.login) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
 :is(#content,#modal,.login) select:focus,
 :is(#content,#modal,.login) textarea:focus {
  outline:2px solid var(--ea3-focus);
  outline-offset:1px;
  box-shadow:0 0 0 4px var(--ea2-glow);
 }
 :is(#content,#modal,.login) input[type=checkbox],
 :is(#content,#modal,.login) input[type=radio] {accent-color:var(--ea3-primary)}
 /* Conservar fondos semánticos: primarios, peligrosos y días seleccionados
    se tratan aparte. No se añaden símbolos al texto de los botones. */
 :is(#content,#modal,.login,.price-menu,.date-picker-panel) button:not(.primary):not(.danger):not(.selected-day11),
 :is(#content,#modal,.login) .button-link {
  background:linear-gradient(145deg,var(--ea2-top),transparent 75%),var(--ea2-button)!important;
  border-color:var(--ea3-panel-edge)!important;
  box-shadow:inset 0 1px 0 var(--ea2-top),0 2px 6px var(--ea2-shade);
  color:var(--ea-ink)!important;
  transition:box-shadow 150ms ease,transform 200ms cubic-bezier(.2,.8,.3,1.2);
 }
 :is(#content,#modal,.login,.price-menu,.date-picker-panel) button.primary,
 :is(#content,#modal,.login) .button-link.primary {
  background:linear-gradient(135deg,var(--ea3-primary),var(--ea3-primary-end))!important;
  color:#fff!important;
  border-color:var(--ea3-primary)!important;
  box-shadow:inset 0 1px 0 #ffffff26,0 3px 9px var(--ea2-glow);
 }
 :is(#content,#modal,.login) button.danger {
  color:var(--ea3-danger)!important;
  border-color:var(--ea3-danger)!important;
  background:var(--ea-surface)!important;
  box-shadow:inset 0 1px 0 var(--ea2-top);
 }
 :is(#content,#modal,.login) button:not(.price-arrows):not(.quantity-arrows button),
 :is(#content,#modal,.login) .button-link {border-radius:9px}
 /* Las flechas conservan el tamaño y los bordes unidos al campo. */
 :is(#content,#modal) .quantity-arrows button,
 :is(#content,#modal) .price-arrows {
  box-shadow:inset 0 1px 0 var(--ea2-top)!important;
  transform:none!important;
  transition:background-color 150ms ease;
 }
 :is(#content,#modal,.login,.price-menu,.date-picker-panel) button:disabled {
  transform:none!important;box-shadow:none!important;
 }
 :is(#content,#modal,.login,.price-menu,.date-picker-panel) button:focus-visible,
 :is(#content,#modal,.login) .button-link:focus-visible {
  outline:2px solid var(--ea3-focus);outline-offset:2px;
 }
 /* Tablas: tamaños, alineación y colores de estado siguen en sus módulos. */
 :is(#content,#modal) th {
  background:linear-gradient(120deg,var(--ea2-wash),transparent),var(--ea-soft)!important;
  color:var(--ea-ink)!important;
  border-color:var(--ea3-panel-edge);
 }
 :is(#content,#modal) td {border-bottom-color:var(--ea3-panel-edge)}
 :is(#content,#modal) .tablewrap tbody tr:hover {background:var(--ea-soft)!important}
 :is(#content,#modal) .tablewrap tbody tr.selected-row,
 :is(#content,#modal) .tablewrap tbody tr.selected-row:hover {
  background:var(--ea3-selection)!important;
  box-shadow:inset 4px 0 var(--ea3-focus);
 }
 :is(#content,#modal) .tablewrap tbody tr:focus-visible {
  outline:2px solid var(--ea3-focus);outline-offset:-2px;
 }
 :is(#content,#modal) .tag {border-radius:7px;box-shadow:inset 0 1px 0 var(--ea2-top)}
 :is(#content,#modal) .note {border-radius:0 10px 10px 0}
 :is(#content,#modal) .tabs {border-color:var(--ea3-panel-edge)}
 /* Ventanas: sin transform ni backdrop-filter sobre el diálogo; así los
    menús de precio de posición fija conservan su ubicación. */
 #modal .overlay {background:rgba(20,30,48,.48)}
 #modal .dialog {
  border:1px solid var(--ea3-panel-edge);
  border-radius:18px;
  background:linear-gradient(145deg,var(--ea2-wash-alt),transparent 70%),var(--ea-surface)!important;
  box-shadow:inset 0 1px 0 var(--ea2-top),0 20px 60px #14213b38;
 }
 #modal .dialoghead {border-bottom:1px solid var(--ea3-panel-edge);padding-bottom:14px}
 #modal .dialoghead>button[aria-label=Cerrar] {border-radius:9px}
 .price-menu,.night .price-menu,.date-picker-panel,.night .date-picker-panel {
  background:var(--ea-surface)!important;
  border-color:var(--ea3-panel-edge);
  border-radius:13px;
  box-shadow:inset 0 1px 0 var(--ea2-top),0 10px 30px var(--ea2-shade);
 }
 /* Calendario conserva sus diferencias entre mes actual y adyacente. */
 .date-picker-panel .calendar-grid .adjacent-month11 {opacity:.48}
 .date-picker-panel .calendar-grid .selected-day11 {
  background:linear-gradient(135deg,var(--ea3-primary),var(--ea3-primary-end))!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px var(--ea3-focus);
 }
 .login {
  background:radial-gradient(ellipse at 15% 0%,var(--ea2-wash),transparent 60%),radial-gradient(ellipse at 90% 80%,var(--ea2-wash-alt),transparent 55%),var(--ea-canvas);
 }
 .login .card {max-width:100%;border-radius:20px}
 .login h2 {font-size:24px}
 .login input,.login button {border-radius:9px}
 .login .brand {filter:none!important}
 #toast {border:1px solid #ffffff26;border-radius:12px;box-shadow:0 6px 24px #14213b33}
 /* Sin animar listas, filas o el buscador al seleccionar/filtrar productos. */
 @media(prefers-reduced-motion:no-preference) {
  .login>.card,#modal .dialog {animation:ea3-appear 180ms ease-out}
  :is(#content,#modal,.login) button:not(:disabled):not(.price-arrows):active {transform:scale(.98)}
  @keyframes ea3-appear {from{opacity:.72}to{opacity:1}}
 }
 @media(hover:hover) and (prefers-reduced-motion:no-preference) {
  :is(#content,#modal,.login) button:not(:disabled):hover {box-shadow:inset 0 1px 0 var(--ea2-top),0 3px 10px var(--ea2-glow)}
 }
 @media(prefers-reduced-motion:reduce) {
  .login>.card,#modal .dialog,
  :is(#content,#modal,.login,.price-menu,.date-picker-panel) button,
  :is(#content,#modal,.login) input,:is(#content,#modal,.login) select,
  :is(#content,#modal,.login) textarea,:is(#content,#modal,.login) .button-link {
   animation:none!important;transition:none!important;transform:none!important;
  }
 }
}