/* Mercado - Color y foto, para abrir el apetito.
   Tokens de la Fase 2b (informe 6.3) y retoques de componentes.
   Todo va en la capa estilo; base.css ya declara el orden de capas. */

@layer estilo {
  /* -- Marca ------------------------------------------------------------- */
  /* El color del local solo tine la web; /marca.css pone --marca-relleno. */
  :root[data-estilo="mercado"] {
    --marca-suave: color-mix(in oklch, var(--marca-relleno) 14%, var(--superficie));
  }

  /* -- Tokens de la web del cliente ------------------------------------- */
  :root[data-estilo="mercado"][data-superficie="web"] {
    color-scheme: only light;
    --fondo: #FFFFFF;
    --superficie: #FFFFFF;
    --superficie-2: #F1F0EE;
    --barra: #FFFFFF;
    --tinta: #1D1B19;
    --tinta-2: #5C5852;
    --tinta-oscura: #1D1B19;
    --linea: #E4E2DE;
    --linea-control: #8C877F;
    --accion: #1D1B19;
    --accion-tinta: #FFFFFF;
    --foco: #1D3F8F;
    --aviso-fondo: #FFC83D;
    --aviso-tinta: #1D1B19;
    --aviso-borde: #1D1B19;
    --ok-fondo: #DDF1E3;
    --ok-tinta: #0F5B33;
    --atencion-fondo: #FFE9D6;
    --atencion-tinta: #7A3E00;
    --info-fondo: #E3ECFF;
    --info-tinta: #1D3F8F;
    --peligro-fondo: #FDE7E4;
    --peligro-tinta: #8F1D14;
    --placa-clara: #FFFFFF;
    --placa-oscura: #1D1B19;
    --radio-s: 12px;
    --radio-m: 16px;
    --radio-l: 20px;
    --radio-boton: 999px;
    --radio-redondo: 50%;
    --sombra: 0 2px 8px color-mix(in srgb, var(--tinta) 8%, transparent);
    --fuente-titulos: "Bricolage Grotesque", "Bricolage Grotesque Reserva", sans-serif;
    --fuente-texto: "Figtree", "Figtree Reserva", sans-serif;
    --fuente-datos: "Bricolage Grotesque", "Bricolage Grotesque Reserva", sans-serif;
  }

  /* -- Tokens del panel (de pedidos y del resto del panel) --------------- */
  :root[data-estilo="mercado"][data-superficie="panel"] {
    color-scheme: only light;
    --fondo: #F4F4F2;
    --superficie: #FFFFFF;
    --superficie-2: #F1F0EE;
    --barra: #FFFFFF;
    --tinta: #1D1B19;
    --tinta-2: #5C5852;
    --tinta-oscura: #1D1B19;
    --linea: #E4E2DE;
    --linea-control: #8C877F;
    --accion: #1D1B19;
    --accion-tinta: #FFFFFF;
    --foco: #1D3F8F;
    --aviso-fondo: #FFC83D;
    --aviso-tinta: #1D1B19;
    --aviso-borde: #1D1B19;
    --ok-fondo: #DDF1E3;
    --ok-tinta: #0F5B33;
    --atencion-fondo: #FFE9D6;
    --atencion-tinta: #7A3E00;
    --info-fondo: #E3ECFF;
    --info-tinta: #1D3F8F;
    --peligro-fondo: #FDE7E4;
    --peligro-tinta: #8F1D14;
    --placa-clara: #FFFFFF;
    --placa-oscura: #1D1B19;
    --radio-s: 12px;
    --radio-m: 16px;
    --radio-l: 20px;
    --radio-boton: 999px;
    --radio-redondo: 50%;
    --sombra: 0 2px 8px color-mix(in srgb, var(--tinta) 8%, transparent);
    --fuente-titulos: "Bricolage Grotesque", "Bricolage Grotesque Reserva", sans-serif;
    --fuente-texto: "Figtree", "Figtree Reserva", sans-serif;
    --fuente-datos: "Bricolage Grotesque", "Bricolage Grotesque Reserva", sans-serif;
  }

  /* -- Tokens de la cocina ---------------------------------------------- */
  :root[data-estilo="mercado"][data-superficie="cocina"] {
    color-scheme: only light;
    --fondo: #F4F4F2;
    --superficie: #FFFFFF;
    --superficie-2: #F1F0EE;
    --barra: #FFFFFF;
    --tinta: #1D1B19;
    --tinta-2: #3F3C38;
    --tinta-oscura: #1D1B19;
    --linea: #E4E2DE;
    --linea-control: #8C877F;
    --accion: #1E7A45;
    --accion-tinta: #FFFFFF;
    --foco: #1D3F8F;
    --aviso-fondo: #FFC83D;
    --aviso-tinta: #1D1B19;
    --aviso-borde: #1D1B19;
    --ok-fondo: #DDF1E3;
    --ok-tinta: #0F5B33;
    --atencion-fondo: #FFE9D6;
    --atencion-tinta: #7A3E00;
    --info-fondo: #E3ECFF;
    --info-tinta: #1D3F8F;
    --peligro-fondo: #FDE7E4;
    --peligro-tinta: #8F1D14;
    --placa-clara: #FFFFFF;
    --placa-oscura: #1D1B19;
    --radio-s: 12px;
    --radio-m: 16px;
    --radio-l: 20px;
    --radio-boton: 999px;
    --radio-redondo: 50%;
    --sombra: 0 2px 8px color-mix(in srgb, var(--tinta) 8%, transparent);
    --fuente-titulos: "Bricolage Grotesque", "Bricolage Grotesque Reserva", sans-serif;
    --fuente-texto: "Figtree", "Figtree Reserva", sans-serif;
    --fuente-datos: "Bricolage Grotesque", "Bricolage Grotesque Reserva", sans-serif;
  }

  /* -- Portada a lo ancho y tarjeta del local encima -------------------- */
  .cabecera-carta {
    display: flex;
    flex-direction: column;
  }

  .cabecera-carta .portada {
    order: -1;
    margin: 0 0 -2rem;
    overflow: hidden;
  }

  .cabecera-carta .portada img {
    display: block;
    width: 100%;
    height: 132px;
    object-fit: cover;
  }

  .cabecera-carta > .contenedor.cabecera-fila {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 1rem;
    background: var(--superficie);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
  }

  .marca {
    font-family: var(--fuente-titulos);
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.05;
  }

  .marca .logo {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radio-m);
    object-fit: contain;
  }

  .marca .logo[data-logo-tono="claro"] {
    padding: .375rem;
    background: var(--placa-oscura);
  }

  /* La cabecera es clara: un logo oscuro ya se lee sin placa. */
  .logo[data-logo-tono="oscuro"] {
    padding: 0;
    background: transparent;
  }

  .logo-inicial {
    display: none;
  }

  .selector-idioma {
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio-boton);
  }

  .selector-idioma a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 2.75rem;
    font-weight: 700;
    text-decoration: none;
  }

  .selector-idioma a[aria-current="true"] {
    background: var(--tinta);
    color: var(--accion-tinta);
  }

  .estado-local {
    width: fit-content;
    padding: .375rem .75rem .375rem 2rem;
    border-radius: var(--radio-boton);
    background: var(--ok-fondo);
    color: var(--ok-tinta);
    font-weight: 700;
  }

  .estado-local::before {
    top: .75rem;
    left: .75rem;
    border: 0;
    background: currentColor;
  }

  .estado-local--cerrado,
  .estado-local--cierre,
  .estado-local--completo,
  .estado-local--pausa {
    background: var(--atencion-fondo);
    color: var(--atencion-tinta);
  }

  .aviso-alergias {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tinta-2);
    font-size: .875rem;
  }

  /* -- Pedir para y secciones ------------------------------------------- */
  .opciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .opcion:not(label) {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    min-width: 4rem;
    min-height: 3.5rem;
    padding: .5rem 1rem;
    background: var(--superficie-2);
    border: 0;
    border-radius: var(--radio-m);
    color: var(--tinta);
    font-weight: 700;
    text-decoration: none;
  }

  .opcion .nota {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--tinta-2);
  }

  .opcion[aria-current="true"],
  .opcion.elegida,
  [role="option"][aria-selected="true"] {
    background: var(--marca-relleno);
    color: var(--marca-sobre);
  }

  .categoria > h2 {
    padding-bottom: 0;
    border-bottom: 0;
    font-family: var(--fuente-titulos);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
  }

  .categoria-descripcion {
    color: var(--tinta-2);
  }

  .plato {
    grid-template-columns: minmax(0, 1fr) auto;
    border: 0;
    background: transparent;
  }

  .plato-nombre {
    font-weight: 700;
  }

  .plato-descripcion {
    color: var(--tinta-2);
  }

  .plato-precio {
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .plato-alergenos {
    font-size: 1rem;
    color: var(--tinta-2);
  }

  .plato-foto {
    width: 88px;
    height: 88px;
    border-radius: var(--radio-m);
    object-fit: cover;
  }

  .plato-mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border: 3px solid var(--superficie);
    border-radius: var(--radio-redondo);
    background: var(--marca-relleno);
    color: var(--marca-sobre);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .plato.con-foto {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .plato.con-foto .plato-mas {
    position: absolute;
    right: -.5rem;
    bottom: -.5rem;
  }

  .etiqueta-agotado {
    padding: .25rem .5rem;
    background: var(--tinta);
    color: var(--accion-tinta);
    border-radius: var(--radio-s);
    font-size: .75rem;
    font-weight: 700;
  }

  /* Menu del dia: tarjeta melocoton con la lista en blanco. */
  .categoria .resumen-pedido {
    padding: 1rem;
    background: var(--atencion-fondo);
    border: 0;
    border-radius: var(--radio-l);
  }

  .categoria .resumen-pedido h3,
  .categoria .resumen-pedido h4 {
    font-family: var(--fuente-titulos);
    font-weight: 800;
  }

  .categoria .resumen-pedido h4 {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--atencion-tinta);
  }

  .categoria .resumen-pedido .nota {
    color: var(--atencion-tinta);
  }

  .categoria .resumen-pedido .lista-platos {
    padding: .75rem;
    background: var(--superficie);
    border-radius: var(--radio-m);
  }

  /* Cesta flotante en pildora con el relleno de marca. */
  .barra-cesta {
    background: linear-gradient(transparent, var(--fondo) 45%);
    border: 0;
  }

  .boton-cesta {
    background: var(--marca-relleno);
    color: var(--marca-sobre);
    border: 0;
    border-radius: var(--radio-boton);
    box-shadow: var(--sombra);
    font-weight: 800;
  }

  .pie {
    border-top: 1px solid var(--linea);
    color: var(--tinta-2);
  }

  .dialogo {
    background: var(--superficie);
    border: 0;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
  }

  .dialogo .plato-foto {
    width: 100%;
    height: auto;
    max-height: 15rem;
    border-radius: var(--radio-m);
  }

  /* El resto del panel usa el fondo de la web (6.3); solo Pedidos va en gris. */
  :root[data-estilo="mercado"][data-superficie="panel"] body:not(.pagina-pedidos) {
    --fondo: #FFFFFF;
  }

  /* -- Panel: columnas tenidas y tarjetas blancas ----------------------- */
  .panel-cabecera,
  .panel-pie {
    background: var(--barra);
    border-color: var(--linea);
  }

  .panel-cabecera h1,
  .panel-marca {
    font-family: var(--fuente-titulos);
    font-weight: 800;
  }

  .panel-nav a {
    border-radius: var(--radio-boton);
  }

  .panel-columnas {
    gap: 1rem;
  }

  .columna {
    padding: .75rem;
    border: 0;
    border-radius: var(--radio-l);
  }

  .columna[data-columna="recibido"] {
    background: var(--atencion-fondo);
  }

  .columna[data-columna="aceptado"] {
    background: var(--info-fondo);
  }

  .columna[data-columna="listo"] {
    background: var(--ok-fondo);
  }

  .columna > h2 {
    font-family: var(--fuente-titulos);
    font-size: 1.1875rem;
    font-weight: 800;
  }

  .columna[data-columna="recibido"] > h2 {
    color: var(--atencion-tinta);
  }

  .columna[data-columna="aceptado"] > h2 {
    color: var(--info-tinta);
  }

  .columna[data-columna="listo"] > h2 {
    color: var(--ok-tinta);
  }

  .columna .tarjeta-pedido,
  .columna .tarjeta {
    padding: .75rem;
    background: var(--superficie);
    border: 0;
    border-radius: var(--radio-m);
    box-shadow: var(--sombra);
  }

  .pedido-cabecera {
    align-items: center;
  }

  .pedido-numero {
    font-family: var(--fuente-titulos);
    font-size: 1.375rem;
    font-weight: 800;
  }

  .pedido-hora {
    color: var(--tinta);
    font-family: var(--fuente-titulos);
    font-size: 1.375rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .pedido-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--radio-redondo);
    background: var(--atencion-fondo);
    color: var(--atencion-tinta);
    font-family: var(--fuente-titulos);
    font-size: 1.125rem;
    font-weight: 800;
  }

  .columna[data-columna="aceptado"] .pedido-inicial {
    background: var(--info-fondo);
    color: var(--info-tinta);
  }

  .columna[data-columna="listo"] .pedido-inicial {
    background: var(--ok-fondo);
    color: var(--ok-tinta);
  }

  .pedido-nombre {
    font-weight: 700;
  }

  .pedido-lineas {
    padding: .5rem;
    background: var(--superficie-2);
    border-radius: var(--radio-s);
  }

  .pedido-linea {
    border-bottom: 0;
  }

  .pedido-miniatura {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radio-s);
    object-fit: cover;
  }

  .pedido-detalle {
    color: var(--tinta-2);
  }

  .pedido-etiquetas .etiqueta {
    padding: .125rem .625rem;
    border: 0;
    border-radius: var(--radio-s);
    background: var(--info-fondo);
    color: var(--info-tinta);
    font-weight: 700;
  }

  /* Los avisos conservan su fondo y su tinta, no el tinte de informacion. */
  .pedido-etiquetas .etiqueta--aviso {
    background: var(--aviso-fondo);
    color: var(--aviso-tinta);
  }

  .pedido-etiquetas .etiqueta--peligro {
    background: var(--peligro-fondo);
    color: var(--peligro-tinta);
  }

  .pedido-etiquetas .etiqueta--ok {
    background: var(--ok-fondo);
    color: var(--ok-tinta);
  }

  .pedido-tareas .tarea,
  .pedido-tareas li {
    padding: .125rem .625rem;
    background: var(--ok-fondo);
    color: var(--ok-tinta);
    border: 0;
    border-radius: var(--radio-s);
    font-weight: 700;
  }

  /* Solo lo hecho va en verde: lo pendiente, con el tinte de atencion. */
  .pedido-tareas .tarea--pendiente {
    background: var(--atencion-fondo);
    color: var(--atencion-tinta);
  }

  .pedido-tareas .tarea--cancelado {
    background: var(--peligro-fondo);
    color: var(--peligro-tinta);
  }

  .pedido-pago {
    padding: .625rem .875rem;
    background: var(--info-fondo);
    color: var(--info-tinta);
    border-radius: var(--radio-s);
  }

  .pedido-acciones .boton {
    border-radius: var(--radio-boton);
    font-weight: 700;
  }

  .pedido-acciones .boton-secundario {
    border: 1px solid var(--linea-control);
    background: transparent;
  }

  .panel .boton {
    border-radius: var(--radio-boton);
  }

  .panel .campo input,
  .panel .campo select,
  .panel .campo textarea {
    border-radius: var(--radio-m);
  }

  .pestana.activa {
    background: var(--tinta);
    color: var(--accion-tinta);
    border-radius: var(--radio-boton);
  }

  /* -- Cocina clara: banda de hora azul o naranja y foto del plato ------ */
  .cocina-cabecera,
  .cocina-selector,
  .cocina-pie {
    background: var(--barra);
    border-color: var(--linea);
  }

  .cocina-cabecera h1,
  .cocina-puesto {
    font-family: var(--fuente-titulos);
    font-weight: 800;
  }

  .cocina-tarjeta {
    overflow: hidden;
    background: var(--superficie);
    border: 0;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
  }

  .cocina-tarjeta-cabecera {
    margin: -1rem -1.1rem 0;
    padding: .875rem 1.125rem;
    background: var(--info-fondo);
    color: var(--info-tinta);
  }

  .cocina-tarjeta--ya .cocina-tarjeta-cabecera,
  .cocina-tarjeta[data-ya="si"] .cocina-tarjeta-cabecera,
  .cocina-tarjeta.ya .cocina-tarjeta-cabecera {
    background: var(--atencion-fondo);
    color: var(--atencion-tinta);
  }

  .cocina-numero {
    color: var(--tinta);
    font-family: var(--fuente-titulos);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
  }

  .cocina-nombre {
    color: var(--tinta);
    font-size: 1.5rem;
    font-weight: 700;
  }

  .cocina-hora {
    color: var(--tinta);
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    font-weight: 800;
  }

  .cocina-ya {
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .cocina-tarjeta--ya .cocina-hora {
    font-family: var(--fuente-texto);
    font-size: 1.125rem;
    font-weight: 600;
    color: inherit;
  }

  .cocina-cuando,
  .cocina-contexto {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .cocina-tarjeta .pedido-inicial {
    display: none;
  }

  .cocina-tarjeta .pedido-miniatura,
  .cocina-tarjeta .cocina-miniatura {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radio-m);
    object-fit: cover;
  }

  .cocina-plato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
  }

  .cocina-plato > * {
    flex: 1 1 100%;
    margin: 0;
  }

  .cocina-plato > .cocina-cantidad {
    flex: 1 1 0;
  }

  .cocina-plato > .pedido-miniatura {
    flex: none;
  }

  .cocina-cantidad {
    font-size: 1.625rem;
    font-weight: 800;
  }

  .cocina-detalle {
    color: var(--tinta-2);
  }

  .cocina-alergenos {
    padding: .625rem .875rem;
    background: var(--aviso-fondo);
    color: var(--aviso-tinta);
    border: 2px solid var(--aviso-borde);
    border-radius: var(--radio-m);
    font-weight: 800;
  }

  .cocina-hecho {
    min-height: 56px;
    background: var(--accion);
    color: var(--accion-tinta);
    border: 0;
    border-radius: var(--radio-boton);
    font-size: 1.5rem;
    font-weight: 800;
  }

  .cocina-hecho-fila {
    padding: .25rem .25rem .25rem .875rem;
    background: var(--ok-fondo);
    color: var(--ok-tinta);
    border: 0;
    border-radius: var(--radio-boton);
  }

  .cocina-pausa-menu {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
  }
}