/* El Pescador · Caja — piezas comunes a los dos temas (día y noche). Va DESPUÉS de futuro.css y apertura.css y ANTES de oscuro.css.
   1) --acento-tono según el tema (iconos.js pone en <html> el tono de día y el de noche).
   2) Transición corta de colores al cambiar de tema.
   3) Switch sol / luna.
   4) Encabezado flotante: dos «islas» de vidrio y un desenfoque que se desvanece hacia abajo.
   5) Logo del negocio en círculo («foto de perfil»).
   Los colores salen de los tokens (--sup, --linea2, --texto…), así que sirven en día y en noche. */

/* ---------- 1) acento ---------- */
:root{--acento-tono:var(--acento-tono-dia,#111113)}              /* noche: oscuro.css lo cambia por --acento-tono-noche */

/* ---------- 2) cambio de tema suave (solo mientras cambia; apertura.js pone y quita la clase) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.tema-cambia,html.tema-cambia *,html.tema-cambia *::before,html.tema-cambia *::after{
    transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,fill .3s ease,stroke .3s ease,
      transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease!important}
}

/* ---------- 3) switch sol / luna ---------- */
.tema-switch{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:7px 2px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;min-width:44px;min-height:44px;border-radius:999px;cursor:pointer;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ts-pista{position:relative;display:block;width:52px;height:30px;border-radius:999px;background:var(--sup3);
  box-shadow:inset 0 0 0 1px var(--campo);transition:background-color .3s ease}
.ts-fondo{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--texto3);transition:opacity .25s ease}
.ts-fondo.ts-sol{left:8px}
.ts-fondo.ts-luna{right:8px}
.ts-fondo svg,.ts-ico svg{display:block;width:100%;height:100%}
.ts-pulgar{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;
  box-shadow:0 0 0 .5px rgba(16,16,20,.12),0 1px 2px rgba(16,16,20,.2),0 3px 8px -2px rgba(16,16,20,.25);
  transition:transform .35s cubic-bezier(.22,1,.36,1),width .2s cubic-bezier(.22,1,.36,1),background-color .3s ease}
.ts-ico{grid-area:1/1;width:15px;height:15px;transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.ts-pulgar .ts-sol{color:#B45309}                                  /* ámbar: 5:1 sobre el pulgar blanco */
.ts-pulgar .ts-luna{color:#0F3D33;opacity:0;transform:rotate(-70deg) scale(.5)}
.tema-switch[aria-checked="false"] .ts-fondo.ts-sol{opacity:0}     /* el pulgar ya muestra el sol */
.tema-switch[aria-checked="true"] .ts-fondo.ts-luna{opacity:0}
.tema-switch[aria-checked="true"] .ts-pulgar{transform:translateX(22px);background:#EDE8DA}
.tema-switch[aria-checked="true"] .ts-pulgar .ts-sol{opacity:0;transform:rotate(70deg) scale(.5)}
.tema-switch[aria-checked="true"] .ts-pulgar .ts-luna{opacity:1;transform:none}
/* foco con teclado: el anillo va en la pista, no en el área táctil */
.tema-switch:focus-visible{outline:none!important}
.tema-switch:focus-visible .ts-pista{outline:2px solid var(--texto);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tema-switch:hover .ts-pista{background:var(--linea2)}}
.tema-switch:active .ts-pulgar{width:27px}
.tema-switch[aria-checked="true"]:active .ts-pulgar{transform:translateX(19px)}
@media (prefers-reduced-motion:reduce){.ts-pulgar,.ts-ico,.ts-fondo,.ts-pista{transition:none}}
/* pantalla de entrada: en la esquina, para elegir antes de entrar */
.nube-entrada > .tema-switch.en-entrada{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));z-index:1}

/* ---------- 4) encabezado flotante ---------- */
header.top{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:calc(10px + env(safe-area-inset-top)) 12px 12px;gap:8px}
/* desenfoque progresivo: fuerte arriba y se desvanece hacia abajo (como el velo de las facturas) */
header.top::before,header.top::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-10px;z-index:-1;pointer-events:none}
header.top::before{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%)}
header.top::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--fondo) 80%,transparent) 0%,color-mix(in srgb,var(--fondo) 45%,transparent) 55%,transparent 100%)}

/* las dos islas de vidrio */
header.top .isla{display:flex;align-items:center;min-width:0;border-radius:999px;
  background:color-mix(in srgb,var(--sup) 74%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--linea2) 85%,transparent);
  box-shadow:0 1px 2px rgba(16,16,20,.05),0 10px 28px -14px rgba(16,16,20,.28)}
header.top > div.isla-izq{flex:0 1 auto;min-width:0;gap:10px;padding:4px 16px 4px 4px;min-height:48px}   /* gana a «header.top > div:first-child{flex:1}» */
header.top > div.der{margin-left:auto;flex:0 0 auto;min-width:max-content;gap:2px;padding:2px 3px 2px 6px;min-height:48px}
header.top .isla-izq > .logo-neg,header.top .isla-izq > img{flex:0 0 auto}
header.top .isla-izq > .ident{flex:1 1 auto;min-width:0;overflow:hidden}
header.top .isla .logo-neg{width:38px;height:38px;font-size:.78rem;border:0}
/* marca en letras más baja dentro de la isla; el subtítulo ya va en el logo */
header.top .ident .marca{align-items:flex-start}
header.top .ident .marca img{height:19px}
header.top .ident .marca-sub{display:none}
header.top .ident .nombre{font-size:.98rem}
header .sub{margin-top:3px;font-size:.64rem}

/* conexión: punto verde + texto; sin red, en rojo y siempre con texto */
header.top .chip-red{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:999px;padding:0 8px 0 6px;min-height:32px;color:var(--texto2);font-size:.64rem}
header.top .chip-red:not(.off)::first-letter{color:inherit}
header.top .chip-red .punto{flex:none;width:8px;height:8px;border-radius:50%;background:#15803D;box-shadow:0 0 0 3px color-mix(in srgb,#15803D 20%,transparent)}
header.top .chip-red.off{background:var(--mal-bg);color:var(--mal);padding:4px 10px 4px 8px;font-weight:600}
header.top .chip-red.off .punto{background:var(--mal);box-shadow:none}
/* rol: pastilla dentro de la isla */
header.top .btn-rol{background:var(--sup2);border:1px solid transparent;border-radius:999px;min-height:38px;padding:6px 14px 6px 11px;color:var(--texto);font-weight:500;font-size:.85rem;box-shadow:none}
@media (hover:hover) and (pointer:fine){header.top .btn-rol:hover{background:var(--sup3);border-color:var(--linea2)}}

/* celular angosto: «En línea» queda como punto (el texto sigue para lectores de pantalla) y todo cabe a 360 px */
@media (max-width:420px){
  header.top{padding-left:10px;padding-right:10px;gap:6px}
  header.top > div.isla-izq{gap:8px;padding-right:12px}
  header.top .isla .logo-neg,header.top .logo-img.avatar{width:34px;height:34px}
  header .sub{font-size:.6rem;letter-spacing:.02em}
  header.top > div.der{padding-left:3px}
  header.top .chip-red:not(.off){padding:0 7px}
  header.top .chip-red:not(.off) .txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  header.top .chip-red.off{font-size:.6rem;padding:4px 8px 4px 7px;gap:5px}
  header.top .btn-rol{padding:6px 10px;font-size:.8rem;min-height:36px}
  header.top .btn-rol .ico{display:none}
  .tema-switch{padding:8px 2px}
  .ts-pista{width:46px;height:28px}
  .ts-pulgar{width:22px;height:22px}
  .ts-fondo.ts-sol{left:7px}
  .ts-fondo.ts-luna{right:7px}
  .ts-fondo{width:13px;height:13px;margin-top:-6.5px}
  .ts-ico{width:14px;height:14px}
  .tema-switch[aria-checked="true"] .ts-pulgar{transform:translateX(18px)}
  .tema-switch:active .ts-pulgar{width:24px}
  .tema-switch[aria-checked="true"]:active .ts-pulgar{transform:translateX(16px)}
}

/* computadora: el logo va en la barra lateral; el encabezado conserva las islas */
@media (min-width:1000px){
  header.top{padding:calc(14px + env(safe-area-inset-top)) 32px 14px}
  header.top > div.isla-izq{padding:6px 20px;min-height:50px}
  header.top .ident .nombre.con-marca{display:none}
  header.top .ident .nombre.con-marca + .sub{margin-top:0}
  header .sub{font-size:.68rem}
  header.top > div.der{min-height:50px}
}

/* sin transparencias (pedido por el sistema) o navegador sin desenfoque: fondos sólidos */
@media (prefers-reduced-transparency:reduce){
  header.top::before{display:none}
  header.top::after{background:linear-gradient(to bottom,var(--fondo) 80%,transparent)}
  header.top .isla{background:var(--sup);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.top .isla{background:var(--sup)}
}

/* ---------- 5) logo en círculo ---------- */
.logo-img.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px var(--sup),0 0 0 3px color-mix(in srgb,var(--acento-tono) 45%,transparent),0 4px 10px -4px rgba(16,16,20,.35)}
@media (min-width:1000px){.lado-marca .logo-img.avatar{width:46px;height:46px;border-radius:50%}}