/* TimeSure — identidad propia. Misma arquitectura visual que el CRM (dos paneles en el acceso,
   barra lateral adentro), paleta propia: azul profundo + verde-azul de "verificado". */
/* Tipografía de interfaz: Inter (OFL 1.1), servida desde el propio servidor. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/Inter-latin.65850a373e25.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/Inter-latin-ext.01ba6c2a184b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ts-navy: #14304D; --ts-blue: #2C5080; --ts-blue-2: #4A6E9C; --ts-teal: #1FA2A6; --ts-teal-2: #19868A;
  --ts-bg: #F5F7FB; --ts-card: #FFFFFF; --ts-text: #1D1D1F; --ts-muted: #6B7280; --ts-line: #E3E7EE;
  --ts-ok: #16A34A; --ts-warn: #D97706; --ts-err: #C0392B;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* El fondo también en `html`: en iOS, lo que asoma detrás de la barra de Safari y al rebotar es el
   fondo de html, y sin esto se veía una franja blanca «cortada» abajo. */
html { background: var(--ts-bg); }
html, body { height: 100%; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--ts-bg); color: var(--ts-text); line-height: 1.5; }
a { color: var(--ts-blue); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.a1, .a2, .a3, .a4 { animation: fadeInUp .6s cubic-bezier(.16, 1, .3, 1) forwards; opacity: 0; }
.a2 { animation-delay: .12s } .a3 { animation-delay: .24s } .a4 { animation-delay: .36s }

/* ── Marca ── */
.ts-wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.035em; color: var(--ts-navy); text-decoration: none; }
.ts-wordmark .mark { width: 38px; height: 38px; flex-shrink: 0; }
.ts-wordmark .t { color: var(--ts-navy); } .ts-wordmark .s { color: var(--ts-teal-2); }
.ts-wordmark.light .t, .ts-wordmark.light .s { color: #fff; }

/* ── Acceso (dos paneles) ── */
.acceso { display: flex; min-height: 100vh; }
.acceso-brand { flex: 1.15; display: flex; align-items: center; justify-content: center; padding: 60px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(circle 700px at 15% 20%, rgba(31,162,166,.35) 0%, rgba(31,162,166,0) 60%), linear-gradient(160deg, #1B3A5C 0%, #14304D 55%, #0D2238 100%); }
.acceso-brand::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.acceso-brand .inner { position: relative; z-index: 1; max-width: 500px; }
.acceso-brand .kicker { font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .75; margin-bottom: 14px; }
.acceso-brand h1 { font-size: 2.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px; }
.acceso-brand p { font-size: 1.15rem; opacity: .85; margin-bottom: 36px; }
.feature { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; backdrop-filter: blur(6px); }
.feature .ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, var(--ts-teal), var(--ts-teal-2)); }
.feature strong { display: block; font-size: 1rem; } .feature span { font-size: .88rem; opacity: .82; }
.acceso-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; background: var(--ts-bg); }
.acceso-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ts-teal) 0%, var(--ts-blue-2) 60%, var(--ts-navy) 100%); }
.acceso-box { width: 100%; max-width: 390px; }
.acceso-box .lema { color: var(--ts-muted); margin: 6px 0 28px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 8px; }
.campo input[type=email], .campo input[type=password], .campo input[type=text] { width: 100%; padding: 14px 16px; font-size: 1rem; border: 1px solid #DDE2EA; border-radius: 12px; background: #fff; outline: none; transition: all .25s; }
.campo input:focus { border-color: var(--ts-teal); box-shadow: 0 0 0 4px rgba(31,162,166,.15); }
.opciones { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: .9rem; color: var(--ts-muted); }
.opciones label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.btn { display: inline-block; width: 100%; padding: 15px; border: 0; border-radius: 12px; font-size: 1.05rem; font-weight: 700; color: #fff; cursor: pointer; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, var(--ts-blue-2) 0%, var(--ts-blue) 50%, var(--ts-navy) 100%); box-shadow: 0 4px 16px rgba(44,80,128,.30); transition: all .25s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(44,80,128,.38); }
.btn.teal { background: linear-gradient(135deg, var(--ts-teal) 0%, var(--ts-teal-2) 100%); box-shadow: 0 4px 16px rgba(31,162,166,.30); }
.aviso-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: .9rem; }
.pie { margin-top: 26px; font-size: .8rem; color: var(--ts-muted); text-align: center; }
@media (max-width: 900px) { .acceso-brand { display: none; } }

/* ── Aplicación: widgets flotantes sobre fondo con luces, barra lateral turquesa plegable ── */
.cuerpo-app { background: radial-gradient(900px 700px at -5% 105%, rgba(31,162,166,.20), transparent 60%), radial-gradient(760px 620px at 105% -5%, rgba(31,162,166,.13), transparent 60%), var(--ts-bg); background-attachment: fixed; }
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
/* Barra lateral: 76px con iconos; crece encima del contenido al pasar el cursor o al fijarla */
.sidebar { --ancho: 76px; position: fixed; left: 0; top: 0; bottom: 0; width: var(--ancho); z-index: 40; display: flex; flex-direction: column; padding: 14px 12px 12px; background: linear-gradient(180deg, #11696D 0%, #0A4B4E 100%); color: #fff; transition: width .18s ease; overflow: hidden; box-shadow: 4px 0 24px rgba(10,75,78,.25); }
@media (hover: hover) { .sidebar:hover { width: 252px; } }
.barra-abierta .sidebar { width: 252px; }
/* El logo original (negro + verde) vive en una placa blanca: no se altera la marca sobre el turquesa */
.sidebar .marca { display: flex; width: 100%; align-items: center; justify-content: center; height: 52px; padding: 0 8px; margin-bottom: 14px; border-radius: 14px; background: #EEF2F5; color: #1F2A30; text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.sidebar .marca .mark { width: 36px; height: 36px; flex-shrink: 0; }
.sidebar .marca .nombre { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .18s ease, opacity .15s, margin .18s; } .sidebar .marca .t { color: #1F2A30; } .sidebar .marca .s { color: var(--ts-teal); }
.sidebar:hover .marca .nombre, .barra-abierta .sidebar .marca .nombre { max-width: 160px; margin-left: 9px; }
.sidebar nav { display: flex; flex-direction: column; }
.nav-grupo { height: 26px; margin: 10px 0 2px; padding: 0 14px; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; display: flex; align-items: center; }
.nav-grupo span { opacity: 0; transition: opacity .15s; }
.nav-grupo::before { content: ''; position: absolute; left: 22px; width: 32px; height: 1px; background: rgba(255,255,255,.22); }
.sidebar nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; color: rgba(255,255,255,.88); text-decoration: none; font-size: .97rem; font-weight: 600; white-space: nowrap; margin-bottom: 3px; }
.sidebar nav a svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar nav a span { opacity: 0; transition: opacity .15s; }
.sidebar nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar nav a.activo { background: #fff; color: var(--ts-teal-2); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.sidebar:hover .marca .nombre, .barra-abierta .sidebar .marca .nombre, .sidebar:hover nav a span, .barra-abierta .sidebar nav a span, .sidebar:hover .nav-grupo span, .barra-abierta .sidebar .nav-grupo span, .sidebar:hover .usuario .datos, .barra-abierta .sidebar .usuario .datos { opacity: 1; }
.sidebar:hover .nav-grupo::before, .barra-abierta .sidebar .nav-grupo::before { display: none; }
.usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; white-space: nowrap; }
.usuario:hover { background: rgba(255,255,255,.2); }
.usuario .avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ts-teal-2); font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usuario .datos { opacity: 0; transition: opacity .15s; } .usuario strong { display: block; font-size: .86rem; } .usuario small { font-size: .74rem; color: rgba(255,255,255,.75); }
.fijar { margin-top: 8px; height: 32px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fijar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.barra-abierta .fijar svg { transform: rotate(180deg); }
.fijar:hover { background: rgba(255,255,255,.22); }
/* Columna de contenido */
.columna { flex: 1; min-width: 0; margin-left: 76px; display: flex; flex-direction: column; }
.topbar { position: fixed; top: 0; left: 76px; right: 0; z-index: 5; padding: 14px 36px 0; display: flex; justify-content: center; pointer-events: none; }
.pildora-caja { position: relative; pointer-events: auto; }
/* Píldora compacta y centrada, de una sola superficie: blanca con un velo turquesa; sin cajas adentro, solo separadores */
@property --tinte { syntax: '<color>'; inherits: false; initial-value: #D6ECED; }
@property --borde { syntax: '<color>'; inherits: false; initial-value: #B9E0E1; }
@property --tinte-izq { syntax: '<color>'; inherits: false; initial-value: #FFFFFF; }
.pildora { --tinte: #D6ECED; --borde: #B9E0E1; --tinte-izq: #FFFFFF; pointer-events: auto; height: 50px; display: inline-flex; align-items: center; gap: 2px; padding: 0 8px 0 6px; border-radius: 999px; background: linear-gradient(90deg, var(--tinte-izq) 0%, #FFFFFF 38%, var(--tinte) 100%); border: 1px solid var(--borde); box-shadow: 0 14px 34px rgba(13,85,88,.16), 0 1px 2px rgba(13,85,88,.06); color: var(--ts-navy); transition: --tinte .5s ease, --borde .5s ease, --tinte-izq .5s ease; }
.pildora .sep { width: 1px; height: 22px; background: rgba(13,85,88,.16); margin: 0 6px; }
.pildora .chip-estado { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; font-size: .88rem; white-space: nowrap; font-family: inherit; color: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer; }
.pildora .chip-estado:hover, .pildora .chip-reloj:hover { background: rgba(13,85,88,.07); }
.pildora .chip-estado b { font-weight: 700; } .pildora .chip-estado .detalle { color: var(--ts-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pildora .punto { width: 9px; height: 9px; border-radius: 50%; background: #B8C2C8; box-shadow: 0 0 0 3px rgba(184,194,200,.3); transition: background .3s, box-shadow .3s; }
/* Caras por estado: el borde y el punto cuentan la situación sin leer nada */
.pildora.es-dentro .punto { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); animation: late 2.4s ease-in-out infinite; }
.pildora.es-dentro { --borde: #9BE0C6; --tinte: #DDF3EA; }
.pildora.es-pausa .punto { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.22); } .pildora.es-pausa { --borde: #F8D08A; --tinte: #FDEBC8; }
.pildora.es-terminado.cumplida .punto { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); } .pildora.es-terminado.cumplida { --borde: #9BE0C6; --tinte: #DDF3EA; }
.pildora.es-terminado.incompleta .punto { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22); } .pildora.es-terminado.incompleta { --borde: #F5A8A8; --tinte: #FDDDDD; }
.pildora.es-terminado.incompleta.justificada .punto { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); } .pildora.es-terminado.incompleta.justificada { --borde: #9BE0C6; --tinte: #DDF3EA; --tinte-izq: #FBD5D5; }
.pildora.es-terminado.incompleta.aprobada .punto { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); } .pildora.es-terminado.incompleta.aprobada { --borde: #9BE0C6; --tinte: #DDF3EA; }
.pildora.mod-sitio .punto { background: #F97316; box-shadow: 0 0 0 3px rgba(249,115,22,.22); animation: none; } .pildora.mod-sitio { --borde: #FCBF8E; --tinte: #FDE7D5; }
/* Alerta (rojo) y justificación en espera (ámbar) mandan sobre el color del estado, en cualquier estado */
.pildora[class].mod-alerta { --borde: #F5A8A8; --tinte: #FDDDDD; } .pildora[class].mod-alerta .punto { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22); animation: none; }
.pildora[class].mod-pendiente { --tinte-izq: #FBD5D5; }
/* La conexión no sustituye al estado laboral: se muestra como un indicador aparte */
.pildora .sync { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; margin-right: 6px; border-radius: 999px; background: #FFF4DC; color: #B45309; font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: default; }
.pildora .sync[hidden] { display: none; }
.pildora .sync svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pildora .sync.enviando { background: #E6F4F4; color: var(--ts-teal-2); cursor: progress; } .pildora .sync.enviando svg { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes late { 0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.22); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,.10); } }
/* Confirmación de la marca: cubre la píldora 2.4 s y muestra hora y huella */
.pildora { position: relative; }
.pildora .confirmacion { position: absolute; inset: -1px; border-radius: 999px; transition: opacity .4s ease; background: linear-gradient(135deg, #1FA2A6, #167F83); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; font-size: .92rem; white-space: nowrap; animation: confEntra .25s cubic-bezier(.16,1,.3,1); }
.pildora .confirmacion[hidden] { display: none; }
/* La confirmación toma el color del estado al que se pasa */
.pildora .confirmacion.hacia-pausa { background: linear-gradient(135deg, #F59E0B, #D97706); } .pildora .confirmacion.hacia-pausa .sello svg { stroke: #D97706; }
.pildora .confirmacion.hacia-terminado { background: linear-gradient(135deg, #14304D, #0F2426); } .pildora .confirmacion.hacia-terminado .sello svg { stroke: #14304D; }
.pildora .confirmacion.desvanece { opacity: 0; }
.pildora .confirmacion b { font-weight: 800; } .pildora .confirmacion .detalle { color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.pildora .confirmacion .sello { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; animation: selloPop .45s cubic-bezier(.16,1,.3,1) .1s both; }
.pildora .confirmacion .sello svg { width: 15px; height: 15px; fill: none; stroke: var(--ts-teal-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } 
@keyframes confEntra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pildora .confirmacion, .pildora .confirmacion .sello, .pildora.es-dentro .punto { animation: none; } }
.marca-btn, .panel-btn { font-family: inherit; border: 0; cursor: pointer; }
.pildora-panel [hidden] { display: none; }
.grupo-tiempo { display: inline-flex; align-items: center; gap: 2px; }
.pildora .chip-reloj { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 8px; font-size: .95rem; white-space: nowrap; margin-right: 4px; font-family: inherit; color: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer; }
.pildora .chip-reloj .flecha { stroke: var(--ts-muted); width: 14px; height: 14px; transition: transform .18s; } .pildora.abierta .chip-reloj .flecha { transform: rotate(180deg); }
.pildora .chip-reloj svg { width: 16px; height: 16px; fill: none; stroke: var(--ts-teal-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pildora .chip-reloj b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .pildora .chip-reloj b span { color: var(--ts-muted); font-weight: 600; }
.marca-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--ts-navy); text-decoration: none; white-space: nowrap; }
.marca-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marca-btn.principal { background: linear-gradient(135deg, var(--ts-teal), var(--ts-teal-2)); color: #fff; box-shadow: 0 6px 14px rgba(31,162,166,.3); } .marca-btn.principal:hover { filter: brightness(1.06); }
.marca-btn.apagado { color: rgba(31,42,48,.42); } .marca-btn.apagado:hover { background: rgba(13,85,88,.06); }
.marca-btn.secundario { color: var(--ts-teal-2); background: rgba(31,162,166,.12); margin-right: 2px; } .pildora.es-pausa .marca-btn.secundario { color: #B45309; background: rgba(245,158,11,.16); } .marca-btn.secundario:hover { background: rgba(31,162,166,.2); } .marca-btn[hidden] { display: none; }
.pildora .accion { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ts-teal-2); text-decoration: none; }
.pildora .accion:hover { background: rgba(13,85,88,.08); }
.pildora .accion svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Confirmación antes de marcar salida */
.confirmar { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: #fff; border: 1px solid rgba(31,162,166,.22); border-radius: 18px; box-shadow: 0 24px 60px rgba(13,85,88,.22); padding: 16px 18px; z-index: 7; animation: confEntra .18s cubic-bezier(.16,1,.3,1); }
.confirmar[hidden] { display: none; }
.confirmar b { display: block; font-size: 1rem; color: var(--ts-navy); } .confirmar p { color: var(--ts-muted); font-size: .9rem; margin-top: 4px; }
.confirmar .aviso { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #FFF4DC; color: #B45309; font-weight: 600; } .confirmar .aviso[hidden] { display: none; }
.confirmar .botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.panel-btn.alerta { background: #FDE8E8; color: #B42318; } .panel-btn.alerta:hover { background: #FBD5D5; color: #B42318; }
.panel-btn.fuerte { background: linear-gradient(135deg, #14304D, #0F2426); color: #fff; } .panel-btn.fuerte:hover { background: linear-gradient(135deg, #1C4268, #163238); color: #fff; }
/* Panel que se despliega bajo la píldora */
.pildora-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); background: #fff; border: 1px solid rgba(31,162,166,.22); border-radius: 22px; box-shadow: 0 24px 60px rgba(13,85,88,.22); padding: 14px; z-index: 6; animation: panelEntra .18s cubic-bezier(.16,1,.3,1); }
.pildora-panel[hidden] { display: none; }
@keyframes panelEntra { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .pildora-panel { animation: none; } }
.panel-acciones { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid #EEF1F4; margin-bottom: 12px; }
/* Botones de marcar dentro del panel: sólo en teléfono, donde la píldora no los puede enseñar. */
.panel-marcar { display: none; }
@media (max-width: 1024px) {
  .panel-marcar { display: flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #EEF1F4; margin-bottom: 8px; }
  .panel-marcar .marca-btn { display: inline-flex; flex: 1 1 0; justify-content: center; height: 44px; font-size: .92rem; border-radius: 999px; }
  .panel-marcar .marca-btn svg { width: 18px; height: 18px; }
  .panel-marcar .marca-btn[hidden] { display: none; }
  .panel-marcar .nota-pie { flex-basis: 100%; margin: 0; padding: 0; font-size: .86rem; }
}
.panel-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: #F3F6F8; color: var(--ts-navy); font-size: .88rem; font-weight: 700; text-decoration: none; }
.panel-btn:hover { background: #E6F4F4; color: var(--ts-teal-2); }
.panel-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.panel-btn .globo { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ts-teal); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; }
/* Modal de justificación: misma familia que la tarjeta de acceso */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-fondo { position: absolute; inset: 0; background: rgba(20,48,77,.42); backdrop-filter: none; }
.modal-tarjeta { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(13,85,88,.32); animation: modalEntra .22s cubic-bezier(.16,1,.3,1); }
@keyframes modalEntra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-cab { display: flex; align-items: flex-start; gap: 14px; padding: 26px 26px 0; }
.modal-cab .ico { width: 44px; height: 44px; border-radius: 14px; background: #E6F4F4; color: var(--ts-teal-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-cab .ico.alerta { background: #FDE8E8; color: #B42318; }
.modal-cab .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal-cab h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ts-navy); } .modal-cab p { color: var(--ts-muted); font-size: .92rem; margin-top: 4px; }
.modal-cab .cerrar { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F3F6F8; color: var(--ts-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-cab .cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .modal-cab .cerrar:hover { background: #E6EBEF; color: var(--ts-navy); }
.modal-cuerpo { padding: 22px 26px 6px; }
.modal-cuerpo .campo { margin-bottom: 16px; } .modal-cuerpo .campo[hidden] { display: none; }
.modal-cuerpo .campo label { display: block; font-size: .9rem; font-weight: 700; color: var(--ts-navy); margin-bottom: 8px; } .modal-cuerpo .campo .opc { font-weight: 500; color: var(--ts-muted); }
.modal-cuerpo .campo small { display: block; font-size: .8rem; color: var(--ts-muted); margin-top: 6px; }
.modal-cuerpo input[type=time], .modal-cuerpo input[type=date], .modal-cuerpo textarea { width: 100%; font: inherit; font-size: 1rem; padding: 14px 16px; border: 1px solid #DDE2EA; border-radius: 14px; background: #F7F9FA; color: var(--ts-text); transition: all .2s; }
.modal-cuerpo input[type=time] { width: auto; min-width: 160px; font-weight: 700; font-variant-numeric: tabular-nums; }
.modal-cuerpo input:focus, .modal-cuerpo textarea:focus { outline: none; border-color: var(--ts-teal); background: #fff; box-shadow: 0 0 0 4px rgba(31,162,166,.15); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-op { font: inherit; font-size: .88rem; font-weight: 600; padding: 9px 14px; border-radius: 999px; border: 1px solid #DDE2EA; background: #fff; color: #3B4650; cursor: pointer; }
.chip-op:hover { border-color: var(--ts-teal); } .chip-op.activo { background: var(--ts-teal); border-color: var(--ts-teal); color: #fff; }
.adjunto { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1.5px dashed #CFD8E0; border-radius: 14px; color: var(--ts-teal-2); font-weight: 700; font-size: .92rem; cursor: pointer; background: #FAFBFC; }
.adjunto:hover { border-color: var(--ts-teal); background: #F0FAFA; } .adjunto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.just-error { margin: -2px 0 10px; padding: 10px 12px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: .86rem; }
.pasos { margin: 4px 0 10px; padding: 14px 16px 14px 34px; border-radius: 14px; background: #F3F6F8; font-size: .86rem; color: var(--ts-muted); } .pasos li { margin-bottom: 4px; } .pasos b { color: var(--ts-navy); }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 26px 26px; }
.btn-suave { font: inherit; font-weight: 700; font-size: .95rem; padding: 12px 18px; border: 0; border-radius: 12px; background: #F3F6F8; color: var(--ts-navy); cursor: pointer; } .btn-suave:hover { background: #E6EBEF; }
@media (max-width: 640px) { .modal { padding: 0; align-items: flex-end; } .modal-tarjeta { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; animation: hojaSube .25s cubic-bezier(.16,1,.3,1); } @keyframes hojaSube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .modal-cab, .modal-cuerpo, .modal-pie { padding-left: 20px; padding-right: 20px; } .modal-pie { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .modal-pie .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-tarjeta { animation: none; } }
.panel-titulo { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin: 2px 6px 6px; }
.panel-resumen ul { list-style: none; } .panel-resumen li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 6px; border-top: 1px solid #F1F4F6; font-size: .9rem; }
.panel-resumen li span { color: var(--ts-muted); white-space: nowrap; } .panel-resumen li b { color: var(--ts-navy); text-align: right; } .mono { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.panel-enlace { display: block; margin: 10px 6px 2px; font-size: .88rem; font-weight: 700; color: var(--ts-teal-2); text-decoration: none; } .panel-enlace:hover { text-decoration: underline; }
.topbar .solo-movil { display: none; }
.tabbar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contenido { padding: 96px 36px 60px; width: 100%; }
.encabezado { margin-bottom: 24px; } .encabezado h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); } .encabezado p { color: var(--ts-muted); max-width: 760px; margin-top: 6px; font-size: 1.05rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ancho1 { grid-column: span 1; } .ancho2 { grid-column: span 2; } .ancho3 { grid-column: span 3; }
/* Widgets flotantes */
.card { background: #fff; border: 0; border-radius: 20px; padding: 24px 26px; box-shadow: 0 12px 34px rgba(20,48,77,.09), 0 1px 2px rgba(20,48,77,.05); }
.card-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card .ico { width: 40px; height: 40px; border-radius: 12px; background: #E6F4F4; color: var(--ts-teal-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.1rem; font-weight: 700; color: var(--ts-navy); } .card small { display: block; font-size: .84rem; color: var(--ts-muted); margin-top: 2px; }
.card p { color: var(--ts-muted); font-size: .95rem; margin-top: 6px; }
.marcador { border: 1.5px dashed #DCE2E8; border-radius: 14px; background: #F8FAFB; min-height: 150px; display: flex; align-items: center; justify-content: center; color: #9AA4AE; font-size: .84rem; text-align: center; padding: 12px; }
.datos-lista { list-style: none; } .datos-lista li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #EEF1F4; font-size: .95rem; color: var(--ts-muted); } .datos-lista b { color: var(--ts-navy); }
.lista { margin-top: 2px; padding-left: 18px; color: var(--ts-muted); font-size: .95rem; } .lista li { margin-bottom: 6px; } .lista strong { color: var(--ts-navy); }
/* Widget protagonista: estado + reloj */
.card.destacado { background: linear-gradient(135deg, #1FA2A6 0%, #167F83 100%); color: #fff; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; box-shadow: 0 16px 40px rgba(31,162,166,.35); }
.destacado .saludo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .destacado .saludo h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; } .destacado .saludo span { font-size: .9rem; color: rgba(255,255,255,.75); }
.just-lista { list-style: none; margin-top: 2px; } .just-lista li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.18); } .just-lista li:first-child { border-top: 0; padding-top: 0; }
.just-lista b { display: block; font-size: .95rem; } .just-lista small { font-size: .8rem; color: rgba(255,255,255,.75); }
.estado-chip { flex-shrink: 0; padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .02em; } .estado-chip.pendiente { background: #F59E0B; color: #fff; } .estado-chip.aprobada { background: #fff; color: var(--ts-teal-2); } .estado-chip.rechazada { background: #EF4444; color: #fff; }
.enlace.claro { display: inline-block; margin-top: 12px; color: #fff; }
.destacado .etiqueta { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 14px; }
.destacado .estado { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; } .destacado .estado strong { font-size: 1.35rem; display: block; } .destacado .estado p { color: rgba(255,255,255,.85); margin-top: 4px; }
.destacado .punto-estado { margin-top: 7px; } .punto-estado { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .punto-estado.fuera { background: rgba(255,255,255,.55); box-shadow: 0 0 0 5px rgba(255,255,255,.18); } .punto-estado.dentro { background: #A6F2D4; box-shadow: 0 0 0 5px rgba(166,242,212,.3); }
.dest-der { border-left: 1px solid rgba(255,255,255,.22); padding-left: 24px; }
.destacado .reloj { font-size: 4.4rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.dest-der p { color: rgba(255,255,255,.85); margin-top: 10px; }
.btn.blanco { background: #fff; color: var(--ts-teal-2); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.btn.btn-chico { width: auto; padding: 12px 20px; font-size: .95rem; border-radius: 12px; }
.btn.salir { background: #fff; color: #B42318; border: 1px solid #F3C4C0; box-shadow: none; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #E6F4F4; color: var(--ts-teal-2); font-size: .78rem; font-weight: 700; }
/* Inicio: tu día, semana, equipo, por aprobar, avisos */
.dia-horario { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .dia-horario span { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.7); margin: 0 4px; }
.dest-der p { color: rgba(255,255,255,.85); margin-top: 8px; }
.dia-barra { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); margin-top: 16px; } .dia-barra i { display: block; height: 100%; border-radius: 4px; background: #fff; } .dia-barra b { position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); transform: translateX(-50%); }
.dia-hitos { list-style: none; display: flex; justify-content: space-between; margin-top: 8px; font-size: .78rem; color: rgba(255,255,255,.75); }
.cifra { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); line-height: 1; margin: 2px 0 10px; } .cifra small { font-size: .95rem; font-weight: 600; color: var(--ts-muted); letter-spacing: 0; }
.barra-fina { height: 8px; border-radius: 4px; background: #EEF1F4; margin-bottom: 10px; } .barra-fina i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ts-teal), var(--ts-teal-2)); }
.card-cab .chip.ejemplo, .card-cab .globo, .card-cab .enlace { margin-left: auto; align-self: flex-start; }
.chip.ejemplo { background: #FFF4DC; color: #B45309; font-size: .72rem; }
.globo { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--ts-teal); color: #fff; font-size: .78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.enlace { font-size: .86rem; font-weight: 700; color: var(--ts-teal-2); text-decoration: none; } .enlace:hover { text-decoration: underline; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid #EEF1F4; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.tile { padding: 14px 16px; border-right: 1px solid #EEF1F4; } .tile:last-child { border-right: 0; }
.tile small { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ts-muted); font-weight: 600; } .tile b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); line-height: 1.1; margin-top: 6px; } .tile b span { font-size: .95rem; font-weight: 600; color: var(--ts-muted); letter-spacing: 0; } .tile em { display: block; font-style: normal; font-size: .78rem; color: var(--ts-muted); margin-top: 4px; }
.pt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .pt.verde { background: #10B981; } .pt.ambar { background: #F59E0B; } .pt.rojo { background: #EF4444; } .pt.gris { background: #C4CCD3; }
.barra-prop { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: #EEF1F4; } .barra-prop i { display: block; height: 100%; } .barra-prop .verde { background: #1FA2A6; } .barra-prop .ambar { background: #F59E0B; } .barra-prop .rojo { background: #EF4444; } .barra-prop .gris { background: #D7DEE4; }
.leyenda { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--ts-muted); } .leyenda li { display: flex; align-items: center; gap: 6px; }
.personas, .solicitudes, .avisos { list-style: none; }
.personas li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F1F4F6; } .personas li:first-child { border-top: 0; padding-top: 0; }
.personas .avatar { width: 36px; height: 36px; border-radius: 50%; background: #E6F4F4; color: var(--ts-teal-2); font-weight: 800; font-size: .78rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.personas b, .solicitudes b, .avisos b { display: block; font-size: .92rem; color: var(--ts-navy); } .personas small, .avisos small { font-size: .8rem; color: var(--ts-muted); } .personas li > div { flex: 1; min-width: 0; }
.btn-mini { font: inherit; font-size: .82rem; font-weight: 700; padding: 8px 12px; border-radius: 10px; border: 1px solid #DDE2EA; background: #fff; color: var(--ts-navy); cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-mini:hover { border-color: var(--ts-teal); color: var(--ts-teal-2); }
.btn-mini.fuerte { background: linear-gradient(135deg, var(--ts-teal), var(--ts-teal-2)); border-color: transparent; color: #fff; } .btn-mini.fuerte:hover { filter: brightness(1.06); color: #fff; }
.nota-pie { font-size: .8rem; color: var(--ts-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid #F1F4F6; }
.solicitudes li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #F1F4F6; } .solicitudes li:first-child { border-top: 0; padding-top: 0; }
.solicitudes b { display: inline; margin-right: 6px; } .solicitudes p { font-size: .84rem; color: var(--ts-muted); margin-top: 3px; } .solicitudes .acciones { display: flex; gap: 8px; flex-shrink: 0; }
.avisos li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid #F1F4F6; } .avisos li:first-child { border-top: 0; padding-top: 0; } .avisos .pt { margin-top: 7px; }
@media (max-width: 1400px) { .tiles { grid-template-columns: repeat(2, 1fr); } .tile:nth-child(2) { border-right: 0; } .tile:nth-child(1), .tile:nth-child(2) { border-bottom: 1px solid #EEF1F4; } }
/* Inicio A: tres respuestas (pulso · por atender · avisos) */
.inicio-a { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: 22px; align-items: start; }
.inicio-a .pulso { grid-column: 1 / -1; }
.pulso-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.pulso-cab h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); } .pulso-cab p { color: var(--ts-muted); margin-top: 4px; font-size: .92rem; }
.semaforo { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; } .semaforo small { font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.semaforo.verde { background: #E3F6EE; color: #0B7A52; } .semaforo.ambar { background: #FFF4DC; color: #B45309; } .semaforo.rojo { background: #FDE8E8; color: #B42318; }
.barra-prop.grande { height: 14px; border-radius: 7px; }
.leyenda.grande { font-size: .9rem; gap: 22px; margin-top: 12px; } .leyenda.grande b { color: var(--ts-navy); font-weight: 800; } .leyenda .extra { margin-left: auto; }
.centros { list-style: none; margin-top: 18px; border-top: 1px solid #EEF1F4; padding-top: 6px; }
.centros li { display: grid; grid-template-columns: 180px 1fr 90px; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #F1F4F6; } .centros li:last-child { border-bottom: 0; }
.centros span { font-weight: 700; color: var(--ts-navy); font-size: .95rem; } .centros b { text-align: right; font-size: 1.1rem; font-weight: 800; color: var(--ts-navy); } .centros b small { font-size: .8rem; color: var(--ts-muted); font-weight: 600; }
.barra-prop.mini { height: 8px; border-radius: 4px; }
.cola { list-style: none; }
.cola li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #F1F4F6; } .cola li:first-child { border-top: 0; padding-top: 0; }
.cola .pt { width: 10px; height: 10px; } .cola li > div:first-of-type { flex: 1; min-width: 0; }
.cola b { display: block; font-size: .95rem; color: var(--ts-navy); } .cola small { font-size: .82rem; color: var(--ts-muted); }
.cola .acciones { display: flex; gap: 8px; flex-shrink: 0; }
.cola li.rojo b { color: #B42318; }
.atender .card-cab { align-items: flex-start; } .atender .card-cab .globo { margin-left: auto; }
.card-cab > div > h3 { margin: 0; }
/* Inicio B: relato */
.inicio-b { max-width: 860px; }
.relato-cab { padding: 6px 4px 26px; } .relato-cab .fecha { font-size: .9rem; color: var(--ts-muted); margin-bottom: 8px; }
.relato-cab h2 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; color: var(--ts-navy); } .relato-cab b.ok { color: #0B7A52; } .relato-cab b.mal { color: #B42318; } .relato-cab b.med { color: #B45309; }
.relato-bloque { background: #fff; border-radius: 20px; padding: 22px 26px; margin-bottom: 18px; box-shadow: 0 12px 34px rgba(20,48,77,.09), 0 1px 2px rgba(20,48,77,.05); }
.relato-bloque h3 { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 8px; }
.frase { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid #F1F4F6; } .frase:first-of-type { border-top: 0; }
.frase p { font-size: 1.05rem; line-height: 1.45; color: #2B3942; } .frase b { color: var(--ts-navy); } .frase .par { display: flex; gap: 8px; flex-shrink: 0; }
.relato-bloque .muted { color: var(--ts-muted); font-size: .95rem; margin-top: 12px; line-height: 1.5; }
@media (max-width: 1200px) { .inicio-a { grid-template-columns: 1fr; } }
/* Inicio C: tríptico. Tres paneles iguales; al expandir uno, los otros se desvanecen y éste ocupa el ancho. */
.triptico { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; min-height: calc(100vh - 156px); min-height: calc(100dvh - 156px); }
.triptico .panel { display: flex; flex-direction: column; } .tri-resumen { flex: 1; display: flex; flex-direction: column; }
.tri-resumen .centros.compactos { margin-top: 16px; padding-top: 12px; border-top: 1px solid #EEF1F4; } .centros.compactos li { grid-template-columns: 130px 1fr 70px; padding: 8px 0; } .centros.compactos span { font-size: .88rem; } .centros.compactos b { font-size: 1rem; }
.triptico .panel { background: #fff; border-radius: 20px; box-shadow: 0 12px 34px rgba(20,48,77,.09), 0 1px 2px rgba(20,48,77,.05); overflow: hidden; min-width: 0; transition: opacity .25s ease, transform .25s ease, box-shadow .3s; }
.panel-cab { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 14px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 20px 20px 0 0; }
.panel-cab { position: relative; } .panel-cab:hover { background: #F7F9FA; }
.triptico .panel { position: relative; }
.panel .pista { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #F3F6F8; color: var(--ts-muted); display: flex; align-items: center; justify-content: center; opacity: .8; cursor: pointer; transition: opacity .2s, background .2s; } .panel .pista svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.panel:hover .pista { opacity: 1; background: #E6F4F4; color: var(--ts-teal-2); } .triptico.expandido .panel.activo .pista { display: none; }
.triptico:not(.expandido) .panel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20,48,77,.13), 0 1px 2px rgba(20,48,77,.05); }
.panel-cab .kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 6px; }
.panel-cab h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; color: var(--ts-navy); line-height: 1.2; }
.cifra-grande { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; color: #0B7A52; line-height: 1; display: flex; flex-direction: column; align-items: flex-end; } .cifra-grande small { font-size: .78rem; font-weight: 600; color: var(--ts-muted); letter-spacing: 0; margin-top: 2px; }
.cifra-grande.rojo { color: #B42318; } .cifra-grande.gris { color: var(--ts-muted); }
.panel.mal { box-shadow: 0 0 0 1.5px #F5A8A8, 0 12px 34px rgba(180,35,24,.12); } .panel.mal .panel-cab h3 { color: #B42318; } .panel .alerta-txt { color: #B42318; font-weight: 600; }
.tri-resumen { padding: 0 24px 48px; } .tri-detalle { display: none; padding: 8px 24px 24px; }
.tri-detalle h4 { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin: 24px 0 10px; } .tri-detalle h4:first-child { margin-top: 0; }
.panel .muted { color: var(--ts-muted); font-size: .88rem; margin-top: 10px; } .panel .leyenda { gap: 12px 14px; font-size: .8rem; }
.cola.compacta li { padding: 9px 0; } .cola.compacta b { font-size: .92rem; } .cola.compacta li.rojo b { color: #B42318; } .cola.compacta .acciones .btn-mini { padding: 7px 11px; font-size: .78rem; }
.horas { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding: 0 2px; border-bottom: 1px solid #EEF1F4; } .horas span { flex: 1; background: linear-gradient(180deg, var(--ts-teal), var(--ts-teal-2)); border-radius: 4px 4px 0 0; min-height: 3px; opacity: .9; }
.horas-ejes { list-style: none; display: flex; justify-content: space-between; font-size: .74rem; color: var(--ts-muted); margin-top: 6px; padding: 0 2px; }
/* Paso 1: los no activos se desvanecen en su sitio. Paso 2: el activo ocupa el ancho y los otros salen del flujo. */
.triptico.desvaneciendo .panel:not(.activo) { opacity: 0; transform: scale(.97); pointer-events: none; }
.triptico.expandido .panel:not(.activo) { display: none; }
.triptico.expandido .panel.activo { grid-column: 1 / -1; box-shadow: 0 20px 50px rgba(20,48,77,.14); }
.triptico.expandido .panel.activo .tri-resumen { display: none; } .triptico.expandido .panel.activo .tri-detalle { display: block; animation: detalleEntra .3s ease; }
@keyframes detalleEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.triptico.expandido .panel.activo .panel-cab { padding-right: 70px; cursor: pointer; } .triptico.expandido .panel.activo { min-height: 0; }
.cerrar-panel { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #F3F6F8; color: var(--ts-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.cerrar-panel[hidden] { display: none; } .cerrar-panel:hover { background: #E6EBEF; color: var(--ts-navy); }
.cerrar-panel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .triptico .panel, .triptico.expandido .panel.activo .tri-detalle { transition: none; animation: none; } }
@media (max-width: 1200px) { .triptico { grid-template-columns: 1fr; min-height: 0; } .tri-resumen .centros.compactos { margin-top: 14px; } }
/* Inicio D: mosaico. 6 columnas; el tamaño de cada pieza = cuánta atención pide hoy. */
.mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 18px; }
.pieza { position: relative; background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 12px 34px rgba(20,48,77,.09), 0 1px 2px rgba(20,48,77,.05); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: box-shadow .25s, transform .25s; }
.pieza:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(20,48,77,.13), 0 1px 2px rgba(20,48,77,.05); }
.pieza .kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); }
.pieza h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; color: var(--ts-navy); margin: 6px 0 10px; line-height: 1.2; }
.pieza .num { font-size: 2.6rem; font-weight: 800; letter-spacing: -.045em; color: var(--ts-navy); line-height: 1; margin-top: auto; display: flex; align-items: baseline; gap: 8px; } .pieza .num small { font-size: .82rem; font-weight: 600; color: var(--ts-muted); letter-spacing: 0; } .pieza .num .u { font-size: 1.1rem; font-weight: 700; color: var(--ts-muted); }
.pieza > small { font-size: .8rem; color: var(--ts-muted); margin-top: 6px; }
.pieza.rojo { box-shadow: 0 0 0 1.5px #F5A8A8, 0 12px 34px rgba(180,35,24,.12); } .pieza.rojo h3, .pieza.rojo .num { color: #B42318; }
.pieza.oscuro { background: linear-gradient(135deg, #14304D, #0F2426); color: #fff; } .pieza.oscuro .kicker, .pieza.oscuro > small, .pieza.oscuro .num small, .pieza.oscuro .num .u { color: rgba(255,255,255,.7); } .pieza.oscuro .num { color: #fff; }
.p-hoy { grid-column: span 2; grid-row: span 3; } .p-hoy .num { margin: 8px 0 14px; font-size: 3.2rem; } .p-hoy .leyenda { gap: 10px 12px; font-size: .78rem; margin-top: 8px; } .p-hoy .horas.chica { height: 64px; margin-top: 16px; gap: 4px; } .p-hoy .horas-ejes { margin-top: 4px; } .p-hoy .centros.compactos { margin-top: auto; padding-top: 12px; border-top: 1px solid #EEF1F4; } .p-hoy .centros.compactos li { grid-template-columns: 120px 1fr 64px; }
.p-atender { grid-column: span 4; grid-row: span 3; } .p-atender .pieza-cab { display: flex; justify-content: space-between; align-items: center; } .p-atender .cola { flex: 1; overflow: hidden; } .p-atender .cola li { padding: 10px 0; } .p-atender .enlace { margin-top: 10px; }
.p-dato { grid-column: span 1; grid-row: span 1; } .p-dato .num { font-size: 2.4rem; }
.p-dato.crece { grid-column: span 2; } .p-dato.crece .num { font-size: 3rem; } .p-dato .btn-mini { position: absolute; right: 18px; bottom: 18px; }
.p-semana { grid-column: span 2; grid-row: span 1; } .p-semana .num { margin-top: 8px; font-size: 2rem; } .p-semana .barra-fina { margin: 10px 0 6px; }
.p-avisos { grid-column: span 6; grid-row: span 1; padding-bottom: 16px; } .p-avisos .tira { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; } .p-avisos .tira li { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: start; } .p-avisos .tira .pt { margin-top: 6px; } .p-avisos .tira b { font-size: .9rem; color: var(--ts-navy); display: block; } .p-avisos .tira small { font-size: .78rem; color: var(--ts-muted); grid-column: 2; }
/* Día malo: "sin marca" crece y "esta semana" cede su sitio (hoy importa menos) */
.dia-mal .p-semana { grid-column: span 1; } .dia-mal .p-semana .num { font-size: 1.6rem; } .dia-mal .p-semana .num small { display: none; } .dia-mal .p-semana > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); } .p-atender { grid-column: span 2; } .p-semana { grid-column: span 2; } .p-avisos { grid-column: span 2; grid-row: span 1; } .p-avisos .tira { grid-template-columns: repeat(2, 1fr); gap: 8px 14px; } .p-avisos .tira li:nth-child(n+3) { display: none; } .dia-mal .p-semana { grid-column: span 2; } .dia-mal .p-semana .num { font-size: 2rem; } .dia-mal .p-semana .num small { display: inline; } }
@media (max-width: 1024px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .p-hoy, .p-atender, .p-avisos, .p-semana, .p-dato.crece { grid-column: span 2; grid-row: auto; } .p-dato { min-height: 130px; } .p-avisos .tira { grid-template-columns: 1fr; } }
/* Asistencia: la pantalla principal de RH. Lista de hoy con entrada/salida por color, y catorcena por casillas. */
.asis-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.asis-cab h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); } .asis-cab p { color: var(--ts-muted); margin-top: 2px; font-size: .92rem; }
.asis-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.buscar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: #fff; border: 1px solid #DDE2EA; border-radius: 12px; width: 260px; } .buscar svg { width: 16px; height: 16px; fill: none; stroke: var(--ts-muted); stroke-width: 2; stroke-linecap: round; } .buscar input { border: 0; outline: 0; font: inherit; font-size: .92rem; width: 100%; background: none; }
.sel { height: 42px; padding: 0 12px; font: inherit; font-size: .92rem; border: 1px solid #DDE2EA; border-radius: 12px; background: #fff; color: var(--ts-navy); }
.segmento.vista { display: inline-flex; background: #E9EEF2; border-radius: 12px; padding: 4px; gap: 2px; } .segmento.vista a { padding: 8px 16px; border-radius: 9px; font-size: .9rem; font-weight: 700; color: var(--ts-muted); text-decoration: none; } .segmento.vista a.activo { background: #fff; color: var(--ts-navy); box-shadow: 0 2px 8px rgba(20,48,77,.1); }
.asis-resumen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: var(--ts-navy); margin-bottom: 16px; padding: 0 4px; } .asis-resumen span { display: inline-flex; align-items: center; gap: 6px; } .asis-resumen b { font-weight: 800; } .asis-resumen .muted { color: var(--ts-muted); } .asis-resumen .clave { margin-left: auto; font-size: .78rem; color: var(--ts-muted); }
.pt.azul { background: #3B82F6; }
.asis-grupo { padding: 0; overflow: hidden; margin-bottom: 18px; }
.grupo-cab { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px 12px; } .grupo-cab h3 { font-size: 1.1rem; font-weight: 800; color: var(--ts-navy); } .grupo-cab small { color: var(--ts-muted); font-size: .86rem; }
.tabla-asis, .tabla-cat { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-asis th, .tabla-cat th { text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-muted); padding: 8px 22px; border-top: 1px solid #EEF1F4; border-bottom: 1px solid #EEF1F4; background: #FAFBFC; }
.tabla-asis td { padding: 10px 22px; border-bottom: 1px solid #F1F4F6; color: var(--ts-navy); vertical-align: middle; } .tabla-asis tr:last-child td { border-bottom: 0; } .tabla-asis tr:hover td { background: #F7FAFA; cursor: pointer; }
.tabla-asis td:first-child { font-weight: 700; white-space: nowrap; } .tabla-asis td:first-child .avatar { margin-right: 10px; vertical-align: middle; } .tabla-asis th:first-child, .tabla-asis td:first-child { width: 26%; } .tabla-asis th:nth-child(2), .tabla-asis td:nth-child(2) { width: 16%; } .tabla-asis .avatar { width: 30px; height: 30px; border-radius: 50%; background: #E6F4F4; color: var(--ts-teal-2); font-weight: 800; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tabla-asis .c { text-align: center; width: 90px; } .tabla-asis td.muted { color: var(--ts-muted); font-size: .86rem; } .tabla-asis td.rojo-t { color: #B42318; font-weight: 600; }
.marca { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #E3E8EC; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #D7DEE4; } .marca.verde { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); } .marca.ambar { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.18); } .marca.rojo { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); } .marca.just { background: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.ver-mas { display: block; padding: 12px 22px 16px; font-size: .88rem; }
.tabla-scroll { overflow-x: auto; }
.tabla-cat th { text-align: center; padding: 8px 6px; } .tabla-cat th:first-child { text-align: left; padding-left: 22px; min-width: 180px; } .tabla-cat th small { display: block; font-weight: 600; letter-spacing: 0; font-size: .7rem; color: #9AA4AE; } .tabla-cat th.fin { color: #B8C2C8; } .tabla-cat th.hoy { color: var(--ts-teal-2); background: #E6F4F4; } .tabla-cat th.tot { text-align: right; padding-right: 22px; }
.tabla-cat td { padding: 7px 6px; text-align: center; border-bottom: 1px solid #F1F4F6; color: var(--ts-navy); } .tabla-cat td:first-child { text-align: left; padding-left: 22px; font-weight: 700; white-space: nowrap; } .tabla-cat tr:hover td { background: #F7FAFA; cursor: pointer; } .tabla-cat tr:last-child td { border-bottom: 0; }
.tabla-cat td.tot { text-align: right; padding-right: 22px; font-weight: 800; } .tabla-cat td.tot small { color: var(--ts-muted); font-weight: 600; } .tabla-cat td.tot.alerta { color: #B42318; }
.d { display: inline-block; width: 26px; height: 26px; border-radius: 7px; background: #F1F4F6; border: 1px dashed #DDE2EA; } .d.verde { background: #10B981; border: 0; } .d.ambar { background: #F59E0B; border: 0; } .d.rojo { background: #EF4444; border: 0; } .d.azul { background: #3B82F6; border: 0; } .d.gris { background: #E3E8EC; border: 0; }
@media (max-width: 1024px) { .asis-cab { align-items: stretch; flex-direction: column; } .asis-cab h2 { font-size: 1.6rem; } .grupo-cab { flex-direction: column; gap: 2px; } .tabla-asis { table-layout: fixed; } .tabla-asis th.c { padding-left: 2px; padding-right: 2px; letter-spacing: .04em; font-size: .64rem; } .tabla-asis th:first-child, .tabla-asis td:first-child { width: auto; overflow: hidden; text-overflow: ellipsis; } .tabla-asis .c { width: 64px; } .buscar { width: 100%; } .tabla-asis th:nth-child(2), .tabla-asis td:nth-child(2), .tabla-asis th:nth-child(5), .tabla-asis td:nth-child(5) { display: none; } .tabla-asis td { padding: 10px 14px; } .asis-resumen .clave { display: none; } }
/* Inicio E: "Sucursal, hoy" */
.hoy { display: flex; flex-direction: column; height: calc(100vh - 14px - 60px); height: calc(100dvh - 14px - 60px); min-height: 520px; margin-top: -82px; }
.hoy-cab { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; flex-shrink: 0; min-height: 58px; padding-left: 26px; }
.titulo-emp { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-cab > div:first-child { max-width: max(240px, calc(var(--pildora-izq, 50vw) - 140px)); min-width: 0; } .hoy-cab .fecha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-cab .fecha { font-size: .92rem; color: var(--ts-muted); margin-top: 2px; }
.centro-sel { font-size: 2.2rem; font-weight: 800; letter-spacing: -.035em; color: var(--ts-navy); display: flex; align-items: baseline; flex-wrap: wrap; } .centro-sel > span { white-space: nowrap; }
.centro-btn { font: inherit; font-weight: 700; color: var(--ts-navy); background: none; border: 0; padding: 2px 4px; margin-left: 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; border-radius: 8px; vertical-align: middle; } .centro-btn:hover { background: #E9EEF2; }
.centro-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ts-muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.segmento.vista.oscuro { background: #fff; border: 1px solid #E3E8EC; position: relative; z-index: 6; } .segmento.vista.oscuro a.activo { background: var(--ts-navy); color: #fff; box-shadow: none; }
.cifras { margin-bottom: 20px; flex-shrink: 0; padding: 20px 26px 18px; }
.cifras-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 14px; }
.cifra-b { padding: 4px 24px 4px 0; border-right: 1px solid #EEF1F4; margin-right: 24px; } .cifra-b:last-child { border-right: 0; margin-right: 0; }
.cifra-b small { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--ts-muted); }
.cifra-b b { display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; color: var(--ts-navy); line-height: 1.1; margin-top: 6px; } .cifra-b b span { font-size: 1rem; font-weight: 600; color: var(--ts-muted); letter-spacing: 0; }
.cifra-b em { display: block; font-style: normal; font-size: .82rem; color: var(--ts-muted); margin-top: 4px; }
.cifras .leyenda { gap: 18px; margin-top: 10px; font-size: .8rem; }
.barra-prop .azul { background: #3B82F6; }
.hoy-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 22px; flex: 1; min-height: 0; }
.hoy-dos .card { display: flex; flex-direction: column; min-height: 0; padding: 20px 24px 0; }
.hoy-dos .card-cab.simple { flex-shrink: 0; }
.hoy-dos .personas, .hoy-dos .solicitudes { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -24px; padding: 0 24px 16px; scrollbar-width: thin; scrollbar-color: #D7DEE4 transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.hoy-dos .personas::-webkit-scrollbar, .hoy-dos .solicitudes::-webkit-scrollbar { width: 6px; } .hoy-dos .personas::-webkit-scrollbar-thumb, .hoy-dos .solicitudes::-webkit-scrollbar-thumb { background: #D7DEE4; border-radius: 3px; }
.card-cab.simple { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .card-cab.simple h3 { font-size: 1.15rem; }
.conteo { font-weight: 800; font-size: .95rem; } .conteo.rojo { color: #B42318; }
.personas li.just { opacity: .75; } .etiqueta-j { font-size: .76rem; font-weight: 700; color: #1D4ED8; background: #EAF1FF; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.solicitudes li p { font-size: .9rem; color: var(--ts-navy); margin-top: 4px; } .solicitudes li small { display: block; font-size: .82rem; color: var(--ts-muted); margin-top: 2px; }
.btn-mini.oscuro { background: var(--ts-navy); border-color: var(--ts-navy); color: #fff; } .btn-mini.oscuro:hover { background: #1C4268; color: #fff; }
/* Mi jornada / ficha de una persona: la página crece con su contenido en vez de encajar en la
   pantalla, dos columnas que miden lo que llevan, y una tarjeta vacía se encoge a una línea. */
.hoy.mj { height: auto; min-height: calc(100vh - 14px - 60px); min-height: calc(100dvh - 14px - 60px); }
.hoy.mj .hoy-dos { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; flex: 1; }
/* Las tarjetas de cada columna se reparten el alto que sobra: la página termina donde termina la
   pantalla, no en un hueco. Si el contenido es más alto, la página simplemente crece. */
.hoy.mj .hoy-dos .col > .card { flex: 1 1 auto; }
/* Una tarjeta vacía no se estira: estirarla sólo fabrica un rectángulo blanco. El alto lo llena la
   columna de al lado; lo que sobre abajo es fondo, no una tarjeta hueca. */
.hoy.mj .hoy-dos .col > .card.vacia { flex: 0 0 auto; }
/* Ejes de la línea del día con la leyenda en medio. */
.ld-ejes.con-leyenda { align-items: center; } .ld-ejes .leyenda-centro { display: flex; gap: 16px; } .ld-ejes .leyenda-centro span { display: inline-flex; align-items: center; gap: 6px; }
/* Cifras del periodo como botones, con el mismo aspecto que las del tablero. */
button.cifra-b.abre { display: block; width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
button.cifra-b.abre b { display: block; }
/* La lista de días: cada renglón es un botón que abre su detalle; la lista se filtra con las cifras. */
.dias-filtro { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--ts-muted); } .dias-filtro .enlace { font-size: .84rem; }
.hoy.mj .marcas li.dia-li { display: block; padding: 0; } .hoy.mj .marcas li.dia-li[hidden] { display: none; }
.hoy.mj .dia-fila { display: grid; grid-template-columns: 10px 1fr auto 88px; align-items: center; gap: 12px; width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px; background: none; border: 0; border-radius: 10px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.hoy.mj .dia-fila:hover { background: #F7F9FA; } .hoy.mj li.dia-li.abierto .dia-fila { background: #EEF6F6; }
.hoy.mj .marcas li.dia-li:first-child .dia-fila { padding-top: 12px; }
.hoy.mj .dia-detalle { padding: 4px 8px 14px 30px; }
.hoy.mj .dia-detalle .det-lista li { grid-template-columns: 90px 1fr; padding: 6px 0; font-size: .88rem; }
.hoy.mj .dia-detalle .marcas.chicas { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #E3E8EC; }
.hoy.mj .dia-detalle .marcas.chicas li { padding: 8px 0; border-top: 0; } .hoy.mj .dia-detalle .marcas.chicas b { font-size: .9rem; } .hoy.mj .dia-detalle .marcas.chicas .hora { font-size: .95rem; }
/* …salvo cuando las dos vacías van solas a la izquierda: ahí se reparten la columna entre ellas
   para terminar a la misma altura que la de al lado. */
.hoy.mj .hoy-dos.vacias-izq .col > .card.vacia { flex: 1 1 auto; }
/* La píldora baja hasta quedar a la altura del nombre y de los botones de la derecha. */
@media (min-width: 1025px) { body:has(.hoy.mj) .topbar { padding-top: 27px; } }
.hoy.mj .titulo-emp .num { font-size: .95rem; font-weight: 600; color: #9AA4AE; letter-spacing: 0; margin-left: 8px; vertical-align: 3px; }
/* Cabecera: el enlace de volver va chico arriba del nombre, y el contexto cabe en dos líneas. */
.hoy.mj .enlace.volver.arriba { font-size: .8rem; font-weight: 700; margin-bottom: 1px; }
.hoy.mj .hoy-cab .fecha { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.hoy.mj .hoy-cab .fecha .muted { color: #9AA4AE; }
.hoy.mj .hoy-dos.vacias-izq { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hoy.mj .hoy-dos .col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hoy.mj .hoy-dos .card { flex: none; padding-bottom: 20px; }
.hoy.mj .hoy-dos .marcas, .hoy.mj .hoy-dos .solicitudes { flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 0; }
.hoy.mj .hoy-dos .card .nota-pie { margin-bottom: 0; }
.hoy.mj .card.vacia { padding-top: 16px; padding-bottom: 16px; }
.hoy.mj .card.vacia .card-cab.simple { margin-bottom: 0; }
.hoy.mj .card.vacia .vacio-lista { padding: 6px 2px 0; }
.hoy.mj .card.vacia .nota-pie { padding-top: 8px; }
/* Un renglón vacío no es una marca: no entra a la rejilla de columnas de la lista. */
.marcas li.vacio-lista, .solicitudes li.vacio-lista, .det-lista li.vacio-lista { display: block; }
/* `hidden` manda sobre cualquier display que ponga una clase: un elemento oculto está oculto. */
[hidden] { display: none !important; }
@media (max-width: 1200px) { .hoy { height: auto; min-height: 0; margin-top: 0; } .hoy-dos { grid-template-columns: 1fr; } .hoy.mj .hoy-dos, .hoy.mj .hoy-dos.vacias-izq { grid-template-columns: 1fr; } .hoy-dos .card { padding-bottom: 16px; } .hoy-dos .personas, .hoy-dos .solicitudes { overflow: visible; max-height: none; } .cifras-fila { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } .cifra-b:nth-child(2) { border-right: 0; } }
@media (max-width: 1024px) { .hoy { margin-top: 0; } .titulo-emp { font-size: 1.4rem; } .hoy-cab { align-items: stretch; flex-direction: column; } .hoy-cab > div:first-child { max-width: none; } .hoy-cab .fecha { white-space: normal; } .segmento.vista.oscuro { align-self: flex-start; } .cifra-b b { font-size: 1.7rem; white-space: nowrap; } .cifra-b b span { font-size: .8rem; } .card-cab.simple h3 { font-size: 1.05rem; } .card-cab.simple .enlace { white-space: nowrap; font-size: .82rem; } }
/* Mi jornada */
.pt.navy { background: var(--ts-navy); }
.linea-dia { margin-top: 2px; } .ld-pista { position: relative; height: 12px; border-radius: 6px; background: #EEF1F4; overflow: visible; }
.ld-tramo, .ld-pausa { position: absolute; top: 0; height: 100%; border-radius: 6px; } .ld-tramo { background: linear-gradient(90deg, var(--ts-teal), var(--ts-teal-2)); } .ld-pausa { background: #F59E0B; }
.ld-ahora { position: absolute; top: -5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--ts-navy); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(20,48,77,.3); }
.ld-ejes { list-style: none; display: flex; justify-content: space-between; font-size: .74rem; color: var(--ts-muted); margin-top: 8px; }
.dias-tira { display: flex; gap: 8px; margin-top: 2px; }
.dt { flex: 1; height: 54px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .76rem; font-weight: 600; color: #fff; background: #E3E8EC; } .dt b { font-size: .92rem; font-weight: 800; }
.dt.verde { background: #10B981; } .dt.ambar { background: #F59E0B; } .dt.rojo { background: #EF4444; } .dt.azul { background: #3B82F6; } .dt.gris { background: #E3E8EC; color: #9AA4AE; } .dt.es-hoy { background: var(--ts-navy); box-shadow: 0 0 0 3px rgba(20,48,77,.18); }
.marcas { list-style: none; } .marcas li { display: grid; grid-template-columns: 10px 1fr auto 88px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #F1F4F6; } .marcas li:first-child { border-top: 0; padding-top: 0; }
.marcas b { display: block; font-size: .95rem; color: var(--ts-navy); } .marcas small { font-size: .82rem; color: var(--ts-muted); }
.marcas .hora { font-weight: 800; font-size: 1.05rem; color: var(--ts-navy); font-variant-numeric: tabular-nums; white-space: nowrap; } .marcas .mono { font-family: ui-monospace, Menlo, monospace; font-size: .76rem; color: var(--ts-muted); text-align: right; }
.marcas li.pend b, .marcas li.pend .hora { color: var(--ts-muted); }
.hoy-dos .marcas { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -24px; padding: 0 24px 16px; scrollbar-width: thin; scrollbar-color: #D7DEE4 transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.solicitudes.mias li { align-items: flex-start; } .solicitudes.mias .estado-chip { margin-left: 6px; vertical-align: middle; }
.solicitudes.mias .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .solicitudes.mias .estado-chip.pendiente { background: #FFF4DC; color: #B45309; } .solicitudes.mias .estado-chip.rechazada { background: #FDE8E8; color: #B42318; }
.hoy-dos .card .nota-pie { flex-shrink: 0; margin: 0 0 16px; padding-top: 10px; }
@media (max-width: 1024px) { .dias-tira { gap: 4px; } .dt { height: 46px; border-radius: 9px; font-size: .68rem; } .marcas li { grid-template-columns: 10px 1fr auto; } .marcas .mono { display: none; } }
/* Incidencias: bandeja + detalle */
.num-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #F59E0B; color: #fff; font-size: .72rem; font-weight: 800; margin-left: 6px; }
.segmento.vista a.activo .num-seg { background: #F59E0B; }
.inc-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.filtros { display: flex; gap: 8px; } .buscar.chica { height: 36px; width: 170px; padding: 0 10px; } .buscar.chica input { font-size: .86rem; } .sel.chica { height: 36px; font-size: .86rem; padding: 0 8px; }
.bandeja { list-style: none; flex: 1; min-height: 0; overflow-y: auto; margin: 0 -24px; padding: 0 12px 16px; scrollbar-width: thin; scrollbar-color: #D7DEE4 transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.bandeja li a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; color: inherit; text-decoration: none; }
.bandeja li a:hover { background: #F7F9FA; } .bandeja li.elegida a { background: #E6F4F4; }
.bandeja .avatar { width: 36px; height: 36px; border-radius: 50%; background: #E6F4F4; color: var(--ts-teal-2); font-weight: 800; font-size: .76rem; display: flex; align-items: center; justify-content: center; } .bandeja li.elegida .avatar { background: #fff; }
.bandeja b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .95rem; color: var(--ts-navy); } .bandeja small { font-size: .82rem; color: var(--ts-muted); }
.bandeja .cuando { font-size: .78rem; color: var(--ts-muted); white-space: nowrap; } .bandeja .rojo-t { color: #B42318; font-weight: 700; }
.bandeja li.urgente .avatar { box-shadow: 0 0 0 2px #F5A8A8; }
.bandeja .estado-chip { font-size: .72rem; padding: 4px 9px; } .bandeja .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .bandeja .estado-chip.rechazada { background: #FDE8E8; color: #B42318; }
.det-card { padding-bottom: 20px !important; }
.det-cab { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #EEF1F4; flex-shrink: 0; }
.avatar.grande { width: 48px; height: 48px; border-radius: 50%; background: #E6F4F4; color: var(--ts-teal-2); font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.det-cab h3 { font-size: 1.2rem; font-weight: 800; color: var(--ts-navy); } .det-cab p { font-size: .86rem; color: var(--ts-muted); margin-top: 2px; }
.det-cab .chip.grande, .det-cab .estado-chip { margin-left: auto; font-size: .82rem; padding: 7px 12px; }
.det-cab .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .det-cab .estado-chip.rechazada { background: #FDE8E8; color: #B42318; }
.det-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 18px 0; flex: 1; min-height: 0; overflow-y: auto; }
.det-col h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 10px; }
.det-lista { list-style: none; } .det-lista li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #F1F4F6; font-size: .9rem; } .det-lista li:first-child { border-top: 0; padding-top: 0; }
.det-lista span { color: var(--ts-muted); } .det-lista b { color: var(--ts-navy); font-weight: 600; } .det-lista .mono { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--ts-muted); } .det-lista .rojo-t { color: #B42318; font-weight: 700; } .det-lista .muted { color: var(--ts-muted); font-weight: 500; }
.det-pie .campo-inline + .campo-inline { flex: 1.6; } .det-pie .sel.chica { width: 100%; height: 40px; }
.det-nota { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #F3F6F8; font-size: .86rem; color: #3B4650; line-height: 1.5; } .det-nota b { color: var(--ts-navy); }
.det-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid #EEF1F4; flex-shrink: 0; }
.campo-inline { flex: 1; display: block; } .campo-inline span { display: block; font-size: .8rem; font-weight: 700; color: #3B4650; margin-bottom: 6px; } .campo-inline em { font-style: normal; font-weight: 500; color: var(--ts-muted); }
.campo-inline input { width: 100%; font: inherit; font-size: .9rem; padding: 10px 12px; border: 1px solid #DDE2EA; border-radius: 10px; background: #F7F9FA; } .campo-inline input:focus { outline: 0; border-color: var(--ts-teal); background: #fff; box-shadow: 0 0 0 3px rgba(31,162,166,.15); }
.det-pie .acciones { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 1200px) { .inc-dos { grid-template-columns: 1fr; } .det-cuerpo { grid-template-columns: 1fr; overflow: visible; } .bandeja { overflow: visible; } }
@media (max-width: 1024px) { .filtros { display: none; } .det-cab { flex-wrap: wrap; } .det-cab .chip.grande, .det-cab .estado-chip { margin-left: 62px; } .det-lista li { grid-template-columns: 1fr; gap: 2px; } .det-pie { flex-direction: column; align-items: stretch; } .det-pie .acciones .btn-mini { flex: 1; text-align: center; padding: 12px; } }
/* Reportes: tipos + filtros + tabla */
.rep-acciones { display: flex; gap: 10px; align-items: center; }
.enlace.volver { display: inline-flex; align-items: center; gap: 2px; }
.det-cab .enlace.volver { margin-left: auto; align-self: flex-start; white-space: nowrap; } .enlace.volver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .rep-acciones .btn-mini { padding: 10px 16px; display: inline-flex; align-items: center; gap: 7px; } .rep-acciones svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filtros-rep { padding: 10px 14px 16px; margin-bottom: 20px; flex-shrink: 0; }
.rep-tipos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.rep-tipos a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ts-navy); border: 1px solid transparent; }
.rep-tipos a b { display: block; font-size: .95rem; font-weight: 800; } .rep-tipos a small { font-size: .78rem; color: var(--ts-muted); }
.rep-tipos a:hover { background: #F7F9FA; } .rep-tipos a.activo { background: #E6F4F4; border-color: #BFE6E7; } .rep-tipos a.activo b { color: var(--ts-teal-2); }
.rep-filtros { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 0 10px; }
.rep-filtros > label > span { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 6px; }
.rep-filtros .sel { width: 100%; } .rep-filtros .buscar { width: 100%; }
.tabla-card { flex: 1; min-height: 0; padding: 20px 0 0; display: flex; flex-direction: column; } .tabla-card .card-cab.simple { padding: 0 24px; margin-bottom: 12px; flex-shrink: 0; } .tabla-card .card-cab small { font-size: .84rem; }
.tabla-scroll.crece { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid #EEF1F4; }
.tabla-rep { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-rep th { position: sticky; top: 0; background: #FAFBFC; text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-muted); padding: 10px 14px; border-bottom: 1px solid #EEF1F4; white-space: nowrap; z-index: 1; }
.tabla-rep th:first-child, .tabla-rep td:first-child { padding-left: 24px; } .tabla-rep th:last-child, .tabla-rep td:last-child { padding-right: 24px; }
.tabla-rep td { padding: 11px 14px; border-bottom: 1px solid #F1F4F6; color: var(--ts-navy); white-space: nowrap; } .tabla-rep td:first-child { font-weight: 700; }
.tabla-rep td.envuelve { white-space: normal; min-width: 260px; line-height: 1.45; }   /* la columna que explica a quién le pasó */
.tabla-rep tr:hover td { background: #F7FAFA; }
.tabla-rep .n { text-align: right; font-variant-numeric: tabular-nums; } .tabla-rep .muted { color: var(--ts-muted); font-weight: 500; }
.tabla-rep .rojo-t { color: #B42318; font-weight: 700; } .tabla-rep .ambar-t { color: #B45309; font-weight: 700; } .tabla-rep .azul-t { color: #1D4ED8; font-weight: 700; } .tabla-rep .verde-t { color: #0B7A52; font-weight: 700; }
.tabla-rep .mono { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--ts-muted); }
.tabla-rep tfoot td { position: sticky; bottom: 0; background: #FAFBFC; border-top: 2px solid #E3E8EC; border-bottom: 0; font-weight: 700; color: var(--ts-navy); }
.tabla-rep .estado-chip { font-size: .72rem; padding: 4px 9px; } .tabla-rep .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .tabla-rep .estado-chip.pendiente { background: #FFF4DC; color: #B45309; } .tabla-rep .estado-chip.rechazada { background: #FDE8E8; color: #B42318; }
.inspeccion { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; padding: 22px 24px 28px; }
.inspeccion h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 12px; }
.check { list-style: none; } .check li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 10px 0; border-top: 1px solid #F1F4F6; } .check li:first-child { border-top: 0; padding-top: 0; }
.check i { width: 22px; height: 22px; border-radius: 50%; background: #E3F6EE; position: relative; margin-top: 1px; } .check i::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #0B7A52; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.check b { font-size: .95rem; color: var(--ts-navy); } .check small { display: block; grid-column: 2; font-size: .82rem; color: var(--ts-muted); }
.verde-t { color: #0B7A52; font-weight: 700; }
a.btn-mini { display: inline-flex; align-items: center; gap: 7px; }   /* un enlace con forma de botón se comporta igual que uno */
.btn-mini.grande-btn { margin-top: 16px; padding: 13px 20px; font-size: .95rem; width: 100%; justify-content: center; }
@media (max-width: 1400px) { .rep-tipos { grid-template-columns: repeat(3, 1fr); } .rep-filtros { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) { .rep-acciones { display: none; } .rep-tipos { grid-template-columns: 1fr; gap: 2px; } .rep-tipos a { padding: 10px 12px; } .rep-tipos a small { display: none; } .rep-filtros { grid-template-columns: 1fr; } .inspeccion { grid-template-columns: 1fr; } .tabla-card { padding-top: 16px; } .hoy.rep { height: auto; } }
/* ── Evidencia: cifras + libro + cierres + verificar ── */
/* Cifras de integridad: sigue el patrón del dashboard */
.evi-cifras { margin-bottom: 20px; border: 1.5px solid #9BE0C6; background: linear-gradient(100deg, #F3FBF7 0%, #FFFFFF 40%); }
.evi-cifras .cifra-b:first-child b { font-size: 1.7rem; }
.cifra-b .mono { font-family: ui-monospace, Menlo, monospace; }
/* Tabla del libro: menos columnas, hora agrupada, huellas apiladas */
.tabla-rep.libro td { white-space: normal; } .tabla-rep.libro td:first-child { font-weight: 500; }
.sub-hora { display: block; font-size: .78rem; color: var(--ts-muted); font-weight: 400; margin-top: 1px; }
.th-huella { min-width: 140px; }
.td-huella { line-height: 1.5; } .td-huella small { display: block; font-size: .76rem; }
.tipo { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; } .tipo.entrada { background: #E3F6EE; color: #0B7A52; } .tipo.salida { background: #E9EEF2; color: var(--ts-navy); } .tipo.justif { background: #FFF4DC; color: #B45309; } .tipo.resol { background: #EAF1FF; color: #1D4ED8; } .tipo.config { background: #F1E8FF; color: #6D28D9; } .tipo.sistema { background: #EEF1F4; color: #4B5563; }
.alerta-fila td { background: #FFFBF0; } .alerta-fila b { color: #B45309; font-weight: 700; }
/* Pie de tabla inmutable */
.tfoot-info { display: flex; align-items: center; gap: 10px; font-size: .83rem; font-weight: 500; color: var(--ts-muted); line-height: 1.4; }
.tfoot-info svg { width: 18px; height: 18px; stroke: var(--ts-teal-2); stroke-width: 2; fill: none; flex-shrink: 0; }
/* Cierres y custodia */
.hoy.evi.evi-compacto { height: auto; min-height: 0; }
.hoy.evi.evi-compacto .hoy-dos { flex: initial; }
.evi-dos { grid-template-columns: 1fr 1fr; align-items: start; }
.evi-dos .card { padding: 22px 26px 26px; }
.cierres { list-style: none; margin-top: 6px; } .cierres li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px 14px; align-items: center; padding: 14px 0; border-top: 1px solid #F1F4F6; } .cierres li:first-child { border-top: 0; padding-top: 0; }
.cierres i { width: 12px; height: 12px; border-radius: 50%; background: #0B7A52; box-shadow: 0 0 0 3px #E3F6EE; } .cierres li.abierto i { background: #F59E0B; box-shadow: 0 0 0 3px #FFF4DC; }
.cierres b { display: block; font-size: .95rem; color: var(--ts-navy); font-weight: 700; } .cierres small { font-size: .82rem; color: var(--ts-muted); } .cierres .mono { font-family: ui-monospace, Menlo, monospace; }
.cierres .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .cierres .estado-chip.pendiente { background: #FFF4DC; color: #B45309; }
.huella-cierre { font-size: .82rem; color: var(--ts-muted); white-space: nowrap; }
.custodia { margin-top: 6px; }
.custodia li { grid-template-columns: 140px 1fr; }
.custodia li span { font-weight: 600; color: #5A6A78; font-size: .86rem; }
/* Verificar */
.verificar .campo { display: block; margin: 6px 0 12px; } .verificar .campo span { display: block; font-size: .8rem; font-weight: 700; color: #3B4650; margin-bottom: 6px; }
.mono-in { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .95rem; padding: 13px 14px; border: 1px solid #DDE2EA; border-radius: 12px; background: #F7F9FA; color: var(--ts-navy); } .mono-in:focus { outline: 0; border-color: var(--ts-teal); background: #fff; box-shadow: 0 0 0 3px rgba(31,162,166,.15); }
.verificar .grande-btn { margin: 0 0 18px; width: 100%; padding: 12px; font-size: .9rem; border-radius: 10px; }
.ver-resultado { border-radius: 14px; padding: 16px 18px; border: 1.5px solid #9BE0C6; background: #F3FBF7; } .vr-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .vr-cab svg { width: 22px; height: 22px; fill: none; stroke: #0B7A52; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .vr-cab b { font-size: 1.02rem; color: #0B7A52; }
.ver-resultado .det-lista li { grid-template-columns: 100px 1fr; border-top-color: #DDEFE6; }
.ver-resultado .det-lista li span { font-weight: 600; color: #4B6B5E; }
.ver-completa { margin-top: 6px; }
.ver-completa li { grid-template-columns: 110px 1fr; }
.ver-completa li span { font-weight: 600; color: #5A6A78; font-size: .86rem; }
.evi-nota { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #F6F8FA; border: 1px solid #E8ECEF; font-size: .84rem; color: #4A5865; line-height: 1.5; }
.evi-nota svg { width: 18px; height: 18px; stroke: var(--ts-teal-2); stroke-width: 2; fill: none; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 1200px) { .evi-dos { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .hoy.evi { height: auto; } .filtros { display: none; } .custodia li { grid-template-columns: 110px 1fr; } .cierres li { grid-template-columns: 14px 1fr auto; } .huella-cierre { display: none; } }
/* Administración: menú propio + panel */
.adm-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; flex: 1; min-height: 0; }
.adm-menu { padding: 14px 10px; display: flex; flex-direction: column; overflow-y: auto; }
.adm-grupo { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-muted); margin: 12px 12px 6px; } .adm-grupo:first-child { margin-top: 4px; }
.adm-menu a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; color: #3B4650; text-decoration: none; font-size: .92rem; font-weight: 600; }
.adm-menu a:hover { background: #F1F4F7; } .adm-menu a.activo { background: #E6F4F4; color: var(--ts-teal-2); }
.adm-menu a span { font-size: .74rem; font-weight: 700; color: var(--ts-muted); background: #F1F4F7; padding: 2px 7px; border-radius: 999px; } .adm-menu a.activo span { background: #fff; color: var(--ts-teal-2); }
.adm-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 20px 0 0; }
.adm-cuerpo > *, .adm-panel .tabla-scroll { min-width: 0; }
:is(.adm-panel, .adm-panel > form) > :is(.card-cab.simple, .det-cab, .tarjetas-adm, .adm-form, .det-pie, .nota-pie) { margin-left: 26px; margin-right: 26px; }
:is(.adm-panel, .adm-panel > form) > .card-cab.simple { margin-bottom: 12px; flex-shrink: 0; }
.adm-panel .tabla-scroll.crece { border-top: 1px solid #EEF1F4; }
:is(.adm-panel, .adm-panel > form) > .det-pie { margin-top: auto; padding: 14px 0 20px; border-top: 1px solid #EEF1F4; }
.btn-mini.peligro-t { color: #B42318; border-color: #F3C4C0; }
.tabla-rep .muted-row td { color: var(--ts-muted); } .tabla-rep .c { text-align: center; }
.tabla-rep.roles i { display: inline-block; width: 20px; height: 20px; border-radius: 50%; } .tabla-rep.roles i.ok { background: #E3F6EE; position: relative; } .tabla-rep.roles i.ok::after { content: ''; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid #0B7A52; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .tabla-rep.roles i.no { background: #F1F4F6; }
.tabla-rep tr.duro td { background: #FAFBFC; } .tabla-rep tr.duro td:first-child { color: #B42318; }
.tarjetas-adm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow-y: auto; padding-bottom: 24px; } .tarjetas-adm.cuatro { grid-template-columns: repeat(2, 1fr); }
.tarjeta-adm { border: 1px solid #E3E8EC; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; }
.ta-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ta-cab b { font-size: 1.02rem; color: var(--ts-navy); }
.tarjeta-adm .det-lista li { grid-template-columns: 110px 1fr; padding: 6px 0; font-size: .86rem; }
.ta-pie { display: flex; gap: 16px; margin-top: auto; padding-top: 12px; }
.tarjeta-adm.nueva { border-style: dashed; align-items: center; justify-content: center; text-align: center; color: var(--ts-teal-2); cursor: pointer; min-height: 160px; } .tarjeta-adm.nueva b { font-size: 1rem; } .tarjeta-adm.nueva small { color: var(--ts-muted); margin-top: 4px; } .tarjeta-adm.nueva:hover { border-color: var(--ts-teal); background: #F7FAFA; }
.estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .estado-chip.pendiente { background: #FFF4DC; color: #B45309; } .ta-cab .estado-chip { background: #E9EEF2; color: var(--ts-navy); font-size: .72rem; padding: 4px 9px; } .ta-cab .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .ta-cab .estado-chip.pendiente { background: #FFF4DC; color: #B45309; }
.adm-form { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; padding: 16px 0 20px; flex: 1; min-height: 0; overflow-y: auto; }
.adm-col h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 12px; }
.campo-adm { display: block; margin-bottom: 12px; } .campo-adm span { display: block; font-size: .8rem; font-weight: 700; color: #3B4650; margin-bottom: 5px; } .campo-adm em { font-style: normal; font-weight: 500; color: var(--ts-muted); }
.campo-adm input, .campo-adm .sel { width: 100%; font: inherit; font-size: .92rem; padding: 10px 12px; border: 1px solid #DDE2EA; border-radius: 10px; background: #F7F9FA; color: var(--ts-navy); height: auto; } .campo-adm input:focus, .campo-adm .sel:focus { outline: 0; border-color: var(--ts-teal); background: #fff; box-shadow: 0 0 0 3px rgba(31,162,166,.15); }
.adm-form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-col .grande-btn { margin-top: 14px; }
@media (max-width: 1200px) { .adm-cuerpo { grid-template-columns: 1fr; } .adm-menu { flex-direction: row; flex-wrap: wrap; gap: 4px; } .adm-grupo { display: none; } .tarjetas-adm, .tarjetas-adm.cuatro { grid-template-columns: 1fr 1fr; } .adm-form { grid-template-columns: 1fr; overflow: visible; } .hoy.adm { height: auto; } }
@media (max-width: 1024px) { .tarjetas-adm, .tarjetas-adm.cuatro { grid-template-columns: 1fr; } .adm-form .dos { grid-template-columns: 1fr; } .rep-acciones { display: flex; } }
/* Administración: controles de formulario adicionales */
.opciones-check { display: flex; flex-direction: column; gap: 8px; } .opciones-check label { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ts-navy); cursor: pointer; } .opciones-check input { accent-color: var(--ts-teal); width: 17px; height: 17px; }
.opciones-check.fila { flex-direction: row; gap: 12px; margin-bottom: 12px; } .opciones-check.fila label { gap: 5px; font-weight: 700; }
.campo-adm input[type=time], .campo-adm input[type=date] { font-variant-numeric: tabular-nums; }
.tabla-rep.roles th small { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; color: #9AA4AE; }
.tabla-rep tr.acciones-rol td { background: #FAFBFC; font-size: .84rem; } .enlace.peligro-t { color: #B42318; }
.tabla-rep tfoot td { white-space: normal; }
.acciones-col { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.det-pie .acciones + .acciones { margin-left: auto; }
.codigo-vinc { margin: 10px 0; padding: 18px; border-radius: 14px; background: #F3F6F8; text-align: center; } .codigo-vinc small { display: block; color: var(--ts-muted); font-size: .84rem; } .codigo-vinc b { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: .12em; color: var(--ts-navy); font-family: ui-monospace, Menlo, monospace; margin: 6px 0; } .codigo-vinc span { font-size: .8rem; color: #B45309; font-weight: 700; }
a.tarjeta-adm.nueva { text-decoration: none; }
/* Cuenta */
.cta-cuerpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; flex: 1; min-height: 0; align-items: stretch; }
.cta-card { padding: 24px 26px 8px; display: flex; flex-direction: column; } .cta-card .cta-relleno { flex: 1; } .cta-card .card-cab { margin-bottom: 18px; } .cta-card h4, .cta-lado h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 12px; }
.cta-card .det-pie { margin-top: auto; padding: 14px 0 16px; }
.cta-lado { display: flex; flex-direction: column; gap: 22px; min-height: 0; } .cta-lado .card { padding: 20px 26px; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .cta-lado .card:first-child { flex-grow: 1.3; } .cta-lado .card-cab.simple { margin-bottom: 6px; } .cta-lado .det-nota { margin-top: auto; } .cta-lado .salir-btn { margin-top: auto; }
.salir-btn { margin-top: 14px; width: 100%; padding: 12px; color: #B42318; border-color: #F3C4C0; }
.det-lista.actividad li { grid-template-columns: 110px 1fr; padding: 7px 0; font-size: .88rem; } .det-lista.actividad .mono { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--ts-muted); }
.cta-card .campo-adm { margin-bottom: 8px; } .cta-card .campo-adm input, .cta-card .campo-adm .sel { padding: 8px 12px; } .cta-card .card-cab { margin-bottom: 12px; } .cta-card h4 { margin-bottom: 8px; } .cta-card .opciones-check { gap: 6px; }
@media (max-width: 1200px) { .hoy.cta { height: auto; min-height: 0; } }
@media (max-width: 1200px) { .cta-cuerpo { grid-template-columns: 1fr; } }
/* Administración real: controles de Django */
.adm-panel > form { display: contents; }
.campo-adm .opciones-check { margin-top: 2px; }
.nota-lado { font-size: .8rem; color: var(--ts-muted); line-height: 1.45; margin: 6px 0 2px; }
#acceso label { align-items: flex-start; font-size: .88rem; line-height: 1.35; }
#acceso input { margin-top: 2px; flex-shrink: 0; }
.campo-adm .campo-in, .campo-adm select, .campo-adm textarea { width: 100%; font: inherit; font-size: .92rem; padding: 10px 12px; border: 1px solid #DDE2EA; border-radius: 10px; background: #F7F9FA; color: var(--ts-navy); }
.campo-adm .campo-in:focus, .campo-adm select:focus, .campo-adm textarea:focus { outline: 0; border-color: var(--ts-teal); background: #fff; box-shadow: 0 0 0 3px rgba(31,162,166,.15); }
.campo-adm.con-error .campo-in, .campo-adm.con-error select { border-color: #F5A8A8; } .campo-adm .error { display: block; color: #B42318; font-size: .78rem; margin-top: 4px; }
.campo-adm > em { display: block; font-style: normal; font-weight: 500; font-size: .78rem; line-height: 1.35; color: var(--ts-muted); margin-top: 5px; }
.campo-adm > span { display: flex; align-items: baseline; min-height: 18px; }
.opciones-check ul, .opciones-check > div { list-style: none; display: flex; flex-direction: column; gap: 8px; } .opciones-check ul li label, .opciones-check > div > div label, .opciones-check > div > label { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ts-navy); cursor: pointer; } .opciones-check input { accent-color: var(--ts-teal); width: 17px; height: 17px; }
.opciones-check.fila { flex-direction: row; align-items: center; } .opciones-check.fila ul, .opciones-check.fila > div { flex-direction: row; gap: 12px; } .opciones-check.fila label { gap: 5px; font-weight: 700; }
/* Los avisos van flotando: cada pantalla se sube 82px para acomodar la píldora, así que
   cualquier cosa en el flujo normal arriba del título acaba encimada. */
.avisos-flash { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(640px, calc(100vw - 40px)); pointer-events: none; }
.flash { pointer-events: auto; cursor: pointer; padding: 12px 20px; border-radius: 14px; font-size: .92rem;
  font-weight: 600; box-shadow: 0 14px 34px rgba(15,23,42,.18); animation: cae-aviso .22s ease-out;
  max-width: 100%; }
.flash.success { background: #E3F6EE; color: #0B7A52; } .flash.error { background: #FDE8E8; color: #B42318; }
.flash.info { background: #E6F4F4; color: var(--ts-teal-2); }
.flash.se-va { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
@keyframes cae-aviso { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
form.inline { display: inline; } .btn-mini.enlace-btn { background: none; border: 0; padding: 0; color: var(--ts-teal-2); font-weight: 700; cursor: pointer; } .btn-mini.enlace-btn.peligro-t { color: #B42318; }
.adm-form .det-lista li { grid-template-columns: 130px 1fr; }
.hist-lista { list-style: none; } .hist-lista li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid #F1F4F6; font-size: .86rem; } .hist-lista li:first-child { border-top: 0; } .hist-lista span { color: var(--ts-muted); } .hist-lista b { color: var(--ts-navy); font-weight: 600; }
/* Teléfono y tablet: sin barra lateral; barra inferior flotante con Marcar al centro y hoja "Más" */
.tabbar, .hoja { display: none; }
@media (max-width: 1024px) {
  .sidebar { display: none; } .columna { margin-left: 0; }
  .topbar { left: 0; padding: 10px 12px 0; } .pildora { height: 52px; padding: 0 12px 0 8px; gap: 0; } .topbar .solo-movil { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .topbar .solo-movil .mark { width: 28px; height: 28px; }
  .pildora .chip-estado { padding: 0 8px 0 10px; height: 36px; font-size: .84rem; gap: 6px; } .pildora .chip-estado .detalle { display: none; } .pildora .sep { margin: 0 4px; height: 22px; }
  .pildora .confirmacion { font-size: .8rem; gap: 7px; padding: 0 12px; } .pildora .confirmacion .detalle { display: none; }
  .pildora .sync { height: 26px; padding: 0 7px; margin-right: 2px; } .pildora .sync b { display: none; }
  .pildora .chip-reloj { height: 36px; padding: 0 6px 0 6px; font-size: .92rem; } .pildora .chip-reloj .flecha { display: none; } .pildora-caja { width: 100%; display: flex; justify-content: center; } .pildora-panel { width: calc(100vw - 24px); z-index: 9; } .confirmar { z-index: 9; } .segmento.vista.oscuro { z-index: 1; } .pildora .chip-reloj b span { display: none; } .marca-btn, .pildora .accion, .pildora .sep:last-of-type { display: none; }
  .contenido { padding: 76px 16px 120px; }
  .encabezado h1 { font-size: 1.8rem; }
  .grid3 { grid-template-columns: 1fr; gap: 16px; } .ancho2, .ancho3 { grid-column: span 1; }
  .card { padding: 20px; border-radius: 18px; }
  .card.destacado { grid-template-columns: 1fr; gap: 18px; } .pulso-cab { flex-direction: column; } .centros li { grid-template-columns: 1fr 70px; } .centros li .barra-prop { grid-column: 1 / -1; } .cola li { flex-wrap: wrap; } .cola .acciones { width: 100%; } .cola .acciones .btn-mini { flex: 1; text-align: center; } .frase { flex-direction: column; align-items: stretch; } .relato-cab h2 { font-size: 1.5rem; } .solicitudes li { flex-direction: column; align-items: stretch; } .solicitudes .acciones .btn-mini { flex: 1; text-align: center; } .tiles { grid-template-columns: repeat(2, 1fr); } .dest-der { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding: 18px 0 0; } .destacado .reloj { font-size: 3.6rem; }
  .destacado .btn.btn-chico { width: 100%; padding: 14px; }
  /* La sombra va hacia arriba y suave: una sombra larga hacia abajo se recortaba en el borde de la
     pantalla y parecía una línea oscura sobre la barra de Safari. */
  .tabbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 66px; background: #fff; border-radius: 22px; box-shadow: 0 -4px 22px rgba(20,48,77,.08), 0 1px 2px rgba(20,48,77,.06); z-index: 20; }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: .68rem; font-weight: 600; color: var(--ts-muted); text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; } .tabbar a.activo { color: var(--ts-teal-2); }
  /* Barra plana, como en el video: cuatro pestañas iguales y la activa con una píldora suave detrás del icono. */
  .tabbar a svg, .tabbar button svg, .tabbar .tab-marcar .circulo { width: 52px; height: 30px; padding: 4px 15px; border-radius: 15px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  .tabbar .tab-marcar .circulo { background: none; color: inherit; margin: 0; box-shadow: none; border: 0; padding: 0; }
  .tabbar .tab-marcar .circulo svg { width: 52px; height: 30px; padding: 4px 15px; }
  .tabbar a.activo svg, .tabbar .tab-marcar.activo .circulo svg { background: rgba(31,162,166,.16); }
  .tabbar .tab-marcar { color: var(--ts-muted); } .tabbar .tab-marcar.activo { color: var(--ts-teal-2); }
  .hoja { display: block; position: fixed; inset: 0; z-index: 30; } .hoja[hidden] { display: none; }
  .hoja-fondo { position: absolute; inset: 0; background: rgba(20,48,77,.35); }
  .hoja-panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
  .hoja-asa { width: 40px; height: 4px; border-radius: 2px; background: #DCE2E8; margin: 4px auto 10px; }
  .hoja-panel a, .hoja-salir { display: block; width: 100%; text-align: left; padding: 13px 8px; font: inherit; font-weight: 600; color: var(--ts-navy); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--ts-line); cursor: pointer; }
  .hoja-salir { color: #B42318; border-bottom: 0; }
  .sin-scroll { overflow: hidden; }
}

/* ── Acceso: panel izquierdo con el producto en acción ── */
.acceso-brand.con-foto { background-image: linear-gradient(160deg, rgba(20,48,77,.82) 0%, rgba(13,34,56,.90) 60%, rgba(10,28,46,.95) 100%), url("fondo-oficina.6f98b08d0cdd.jpg"); background-size: cover; background-position: center; }
.acceso-brand.con-foto::after { display: none; }
.acceso-brand h1 { font-size: 3.1rem; }
.demo { position: relative; margin-top: 34px; height: 300px; }
.telefono { position: absolute; left: 0; top: 0; width: 210px; height: 300px; border-radius: 26px; padding: 10px; background: #0B1A2B; box-shadow: 0 24px 48px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.12); overflow: hidden; }
.telefono::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 10px; background: #0B1A2B; z-index: 2; }
.pantalla { width: 100%; height: 100%; border-radius: 18px; background: var(--ts-bg); color: var(--ts-text); padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ph-top { display: flex; justify-content: space-between; align-items: baseline; }
.ph-hora { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; color: var(--ts-navy); }
.ph-dia { font-size: .72rem; color: var(--ts-muted); text-transform: capitalize; }
.ph-sitio { white-space: nowrap; overflow: hidden; font-size: .72rem; color: var(--ts-teal-2); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ph-sitio .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-teal); box-shadow: 0 0 0 4px rgba(31,162,166,.18); }
.ph-nombre { font-size: .8rem; color: var(--ts-muted); }
.ph-btn { margin-top: auto; background: linear-gradient(135deg, var(--ts-teal), var(--ts-teal-2)); color: #fff; font-weight: 800; font-size: .9rem; text-align: center; padding: 14px 10px; border-radius: 14px; box-shadow: 0 8px 20px rgba(31,162,166,.35); }
.ph-nota { font-size: .66rem; color: var(--ts-muted); text-align: center; }
.tarjeta { position: absolute; left: 170px; top: 92px; width: 300px; background: #fff; color: var(--ts-text); border-radius: 16px; padding: 14px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.40); animation: tarjetaEntra .9s cubic-bezier(.16,1,.3,1) .9s both; }
.tj-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.tj-head strong { display: block; font-size: .95rem; color: var(--ts-navy); } .tj-head span { font-size: .72rem; color: var(--ts-teal-2); font-weight: 700; }
.tj-sello { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--ts-teal), var(--ts-teal-2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: selloPop .5s cubic-bezier(.16,1,.3,1) 1.5s both; }
.tj-sello svg { width: 18px; height: 18px; }
.tj-fila { display: flex; justify-content: space-between; font-size: .8rem; padding: 5px 0; border-top: 1px solid #EEF1F5; }
.tj-fila span { color: var(--ts-muted); } .tj-fila b { color: var(--ts-navy); } .mono { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
@keyframes tarjetaEntra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes selloPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tarjeta, .tj-sello, .a1, .a2, .a3, .a4 { animation: none; opacity: 1; } }
/* Formulario: campos y botón más generosos (muchos entran desde el teléfono) */
.campo input[type=email], .campo input[type=password], .campo input[type=text] { padding: 16px 16px; font-size: 1.05rem; }
.btn { padding: 17px; font-size: 1.1rem; }
@media (max-width: 900px) { .acceso-form { padding: 28px 22px; align-items: flex-start; padding-top: 48px; } .acceso-box { max-width: 420px; } }

/* ── Acceso v3: héroe claro, verde agua + blanco + grises, con luces ── */
html { background: var(--ts-bg); }
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--ts-bg); color: #1F2A30; overflow: hidden; }
.hero-luces { position: absolute; inset: 0; pointer-events: none; }
.luz { position: absolute; border-radius: 50%; filter: blur(70px); animation: luzFlota 16s ease-in-out infinite alternate; }
.luz.l1 { width: 900px; height: 900px; left: -300px; bottom: -400px; background: radial-gradient(circle, rgba(31,162,166,.50) 0%, rgba(31,162,166,0) 70%); }
.luz.l2 { width: 620px; height: 620px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(31,162,166,.28) 0%, rgba(31,162,166,0) 70%); animation-delay: -7s; }
.luz.l3 { width: 360px; height: 360px; left: 42%; top: 48%; background: radial-gradient(circle, rgba(74,110,156,.16) 0%, rgba(74,110,156,0) 70%); animation-delay: -11s; }
@keyframes luzFlota { from { transform: translate(0,0) scale(1); } to { transform: translate(46px,-34px) scale(1.08); } }
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 18px 0 78px; }
.hero-copy .ts-wordmark { font-size: 2.35rem; gap: 14px; align-self: flex-start; } .hero-copy .ts-wordmark .mark { width: 56px; height: 56px; } .hero-copy .ts-wordmark .t { color: #1F2A30; }
.hero-main { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 36vw, 560px); align-items: stretch; align-content: center; gap: 80px; padding: 40px 80px 64px 40px; max-width: 1560px; width: 100%; margin: 0 auto; }
.hero-copy h1 { font-size: clamp(2.8rem, 5.6vw, 6.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #1F2A30; }
.hero-copy h1 em { font-style: normal; color: var(--ts-teal); }
.hero-copy p { margin: 0; font-size: 1.4rem; color: #5B6770; max-width: 620px; line-height: 1.55; }
.hero-card { background: #fff; border: 1px solid #E4E9ED; border-radius: 26px; padding: 48px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 28px 70px rgba(31,162,166,.12), 0 2px 8px rgba(20,48,77,.04); }
.hero-card h2 { font-size: 2.15rem; font-weight: 800; letter-spacing: -.03em; color: #1F2A30; }
.hero-card .sub { color: #6B7680; margin: 4px 0 30px; font-size: 1.1rem; }
.hero-card .campo { margin-bottom: 18px; }
.hero-card .campo input[type=email], .hero-card .campo input[type=password], .hero-card .campo input[type=text] { background: #F7F9FA; border-color: #E3E8EC; padding: 21px 22px; font-size: 1.15rem; border-radius: 14px; }
.hero-card .campo input::placeholder { color: #8A949C; }
.hero-card .campo input:focus { background: #fff; }
.hero-card .opciones { margin: 8px 0 28px; font-size: 1.05rem; color: #5B6770; }
.hero-card .opciones a { color: var(--ts-teal-2); text-decoration: none; font-weight: 600; } .hero-card .opciones a:hover { text-decoration: underline; }
.hero-card input[type=checkbox] { accent-color: var(--ts-teal); width: 18px; height: 18px; }
.hero-card .aviso-error { margin-bottom: 16px; }
.btn.flecha { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; font-size: 1.25rem; border-radius: 14px; }
.btn.flecha svg { width: 24px; height: 24px; transition: transform .25s; } .btn.flecha:hover svg { transform: translateX(4px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .luz { animation: none; } }
@media (max-width: 1024px) { .hero-main { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px 40px; align-content: center; justify-items: center; } .hero-copy { padding: 0; gap: 0; align-items: center; } .hero-copy h1, .hero-copy p { display: none; } .hero-copy { width: 100%; max-width: 440px; } .hero-copy .ts-wordmark { align-self: center; justify-content: center; width: 100%; font-size: clamp(2.2rem, 14.2vw, 4.5rem); gap: .28em; margin-bottom: 4px; } .hero-copy .ts-wordmark .mark { width: 1.3em; height: 1.3em; } .hero-card { width: 100%; max-width: 440px; padding: 30px 22px; } .hero-card .opciones { font-size: .86rem; gap: 12px; } .hero-card .opciones a { white-space: nowrap; } .luz.l1 { width: 420px; height: 420px; left: -160px; bottom: -200px; } }

/* Marca rechazada: el sello de confirmación se vuelve aviso, con el motivo en lugar de la hora. */
.confirmacion.rechazada { background: linear-gradient(180deg, #FEF3F3, #FBE9E9); color: #B42318; }
.confirmacion.rechazada .sello { background: #B42318; }
.confirmacion.rechazada b { color: #B42318; font-weight: 700; }
.pildora.sin-jornada .marca-btn, .pildora.sin-jornada .sync, .pildora.sin-jornada .chip-reloj .flecha { display: none; }
.pildora.sin-jornada .chip-estado, .pildora.sin-jornada .chip-reloj { pointer-events: none; }
.pildora.sin-jornada .chip-estado .punto { background: var(--ts-muted); }

/* Selector de centro en la cabecera de «Sucursal, hoy» */
.centro-menu { position: relative; display: inline-block; }
.centro-lista { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; background: #fff; border: 1px solid #E6EAEF; border-radius: 12px; box-shadow: 0 14px 34px rgba(20,48,77,.14); padding: 6px; display: flex; flex-direction: column; }
.centro-lista a { padding: 9px 12px; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--ts-navy); text-decoration: none; white-space: nowrap; }
.centro-lista a:hover { background: #F2F6F7; }
.centro-lista a.activo { background: #E8F4F4; color: var(--ts-teal-2); }
.vacio-lista { display: block; padding: 18px 2px; font-size: .9rem; color: var(--ts-muted); line-height: 1.5; }

/* Aviso de novedades cuando la pantalla no se puede refrescar sola (alguien está escribiendo) */
.aviso-vivo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 0; cursor: pointer;
  border-radius: 40px; background: var(--ts-navy); color: #fff; font: inherit; font-size: .9rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.32); animation: sube-aviso .25s ease-out; }
.aviso-vivo b { font-weight: 800; }
.aviso-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-teal);
  box-shadow: 0 0 0 0 rgba(31,162,166,.7); animation: late 1.8s infinite; }
@keyframes late { 70% { box-shadow: 0 0 0 9px rgba(31,162,166,0); } 100% { box-shadow: 0 0 0 0 rgba(31,162,166,0); } }
@keyframes sube-aviso { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Asignar horario o perfil a varios de un jalón, al pie de la lista de trabajadores */
.en-bloque { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 16px 0 4px;
  border-top: 1px solid var(--ts-borde, #E2E8F0); margin-top: 10px; }
.en-bloque > b { align-self: center; color: var(--ts-navy); font-size: .92rem; }
.en-bloque .campo-adm.en-linea { margin: 0; min-width: 190px; }
.en-bloque small { align-self: center; }

/* Las cifras del tablero abren su lista: son botones, no carteles.
   El relleno va parejo por los cuatro lados para que el resaltado cubra la celda entera: con el
   margen y el borde derecho de `.cifra-b` el fondo quedaba corrido y se veía mal puesto. */
:is(a, button).cifra-b.abre { text-decoration: none; cursor: pointer; padding: 12px 18px; margin: 0 3px;
  border-right: 0; border-radius: 14px; transition: background .15s, box-shadow .15s; }
:is(a, button).cifra-b.abre:hover { background: rgba(31,162,166,.05); }
/* La cifra elegida: vidrio, no un bloque de color.
   El relleno sólido se veía como una caja pegada encima de la tarjeta. Esto es un velo
   semitransparente con un desenfoque detrás, un filo claro arriba y una sombra muy suave abajo:
   el mismo material del resto de la interfaz, nada más que levantado. Se nota cuál está elegida
   sin que grite. */
:is(a, button).cifra-b.abre.elegida {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(31,162,166,.16));
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              inset 0 0 0 1px rgba(31,162,166,.3),
              0 6px 18px rgba(20,48,77,.1);
}
/* El filo de abajo: lo que de verdad separa la tarjeta elegida del fondo blanco de la sección.
   Sin él, un velo claro sobre blanco casi no se ve —que fue lo que pasó al primer intento—. */
:is(a, button).cifra-b.abre.elegida::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  border-radius: 2px; background: var(--ts-teal); opacity: .75;
}
:is(a, button).cifra-b.abre { position: relative; }
/* Si el navegador no sabe desenfocar, el velo solo queda demasiado tenue: ahí sí se sostiene con
   un relleno más firme. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(a, button).cifra-b.abre.elegida { background: rgba(31,162,166,.16); }
}
/* Mientras llega el pedazo nuevo: la pantalla se atenúa apenas, para que se note que algo pasa
   sin que nada salte de lugar. */
.hoy.cargando { opacity: .55; transition: opacity .12s; pointer-events: none; }
.personas .dato-lado { text-align: right; white-space: nowrap; margin-left: auto; padding-left: 14px; }
.personas .dato-lado b { display: block; font-size: .98rem; color: var(--ts-navy); }
.personas .dato-lado small { font-size: .74rem; color: var(--ts-muted); }

/* «Por revisar»: lo que alguien tiene que atender hoy, antes de la lista de marcas raras */
.pendientes-dia { list-style: none; margin: 2px 0 10px; }
.pendientes-dia li + li { border-top: 1px solid #F1F4F6; }
.pendientes-dia a { display: flex; align-items: center; gap: 14px; padding: 12px 4px; text-decoration: none; border-radius: 10px; transition: background .15s; }
.pendientes-dia a:hover { background: #F6F9FA; }
.pendientes-dia b { font-size: 1.25rem; font-weight: 800; min-width: 30px; text-align: right; letter-spacing: -.03em; }
.pendientes-dia span { flex: 1; font-size: .9rem; color: var(--ts-navy); line-height: 1.4; }
.pendientes-dia i { font-style: normal; color: var(--ts-muted); font-size: 1.2rem; }

/* El reparto de horas extra que se le entrega a nómina */
.reparto-nomina { border: 1px solid #E2E8F0; border-radius: 14px; padding: 16px 18px 10px; background: #FAFBFC; }
.reparto-nomina h4 { margin-bottom: 8px; } .reparto-nomina h4 small { font-weight: 600; color: var(--ts-muted); margin-left: 8px; }
.reparto-nomina .tabla-rep td:first-child, .reparto-nomina .tabla-rep th:first-child { padding-left: 0; }
.reparto-nomina .nota-pie { margin-top: 10px; }

/* Un renglón de persona que lleva a su ficha. La tapa cubre el renglón sin anidar enlaces. */
.personas li.tocable { position: relative; }
.personas li.tocable .tapa { position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.personas li.tocable:hover { background: #F6F9FA; }
.personas li.tocable:hover b { color: var(--ts-teal-2); }
.personas li.tocable .avatar, .personas li.tocable > div, .personas li.tocable .dato-lado { position: relative; z-index: 2; pointer-events: none; }

/* Bienvenida: firmar los documentos desde el propio aparato y registrar el aparato. Una columna. */
.bienvenida { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.bienvenida .card { padding: 22px 24px; }
.bienvenida .aviso-texto summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
.bienvenida .aviso-texto pre, .bienvenida .doc-texto { white-space: pre-wrap; font: inherit; font-size: .9rem; line-height: 1.55; color: var(--ts-text); background: #F7F9FA; border-radius: 12px; padding: 14px 16px; max-height: 360px; overflow: auto; margin-bottom: 12px; }
.bienvenida .acepto { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; margin: 10px 0 12px; } .bienvenida .acepto input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.bienvenida .nota-pie { padding-top: 10px; }
@media (max-width: 1024px) { .bienvenida .aviso-texto pre, .bienvenida .doc-texto { max-height: 46vh; } .bienvenida .btn-mini { width: 100%; text-align: center; padding: 12px; } }

/* ── Teléfono: «Mi jornada» como en el video. Una columna, cuatro tarjetas chicas, la línea del
   día y la lista de marcas. Nada mide más que la pantalla. ─────────────────────────────────── */
.solo-movil-inline { display: none; }
@media (max-width: 1024px) {
  .solo-movil-inline { display: inline; } .solo-escritorio-inline, .solo-escritorio { display: none; }
  .hoy.mj .hoy-cab { margin-top: 0; }
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  /* Safari pinta su barra con un color plano: el degradado se queda arriba y el pie es liso, para
     que no se note dónde termina la página y empieza la barra. */
  /* La página termina en el mismo turquesa claro que Safari pinta en su barra (meta theme-color):
     así la barra se ve como parte del fondo del sistema. */
  /* Un solo tono de turquesa claro en todo: página, barra de estado y barra de Safari (theme-color).
     Cualquier degradado hace que una de las dos barras se vea distinta a la página. */
  /* El fondo del video: un aliento de turquesa arriba que se funde en el gris claro del sistema.
     El color base (#F5F7FB) es el que Safari toma para sus barras, así que no hay cortes. */
  /* El mismo fondo del sistema en escritorio: dos manchas de turquesa, una arriba a la derecha y
     otra abajo a la izquierda, sobre el gris claro. El gris base es el que Safari toma para sus
     barras. En iOS el fondo fijo no existe, así que las manchas van con la página. */
  html { background: #F5F7FB; }
  /* La mancha de abajo se funde en el gris base antes de llegar al borde: así la barra de Safari,
     que es de ese gris, continúa el fondo sin línea. */
  body.cuerpo-app { background: linear-gradient(180deg, #F5F7FB 0, rgba(245,247,251,0) 110px, rgba(245,247,251,0) calc(100% - 170px), #F5F7FB 100%) no-repeat, radial-gradient(70vw 48vh at -8% 92%, rgba(31,162,166,.22), transparent 62%) no-repeat, radial-gradient(70vw 46vh at 108% 6%, rgba(31,162,166,.16), transparent 62%) no-repeat, #F5F7FB; background-attachment: scroll; min-height: 100vh; min-height: 100dvh; }
  .contenido { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .hoy.mj { min-height: 0; }
  .hoy.mj .hoy-cab { gap: 12px; padding-left: 0; margin-bottom: 14px; }
  .hoy.mj .titulo-emp { white-space: normal; font-size: 1.75rem; }
  .hoy.mj .hoy-cab .fecha { -webkit-line-clamp: 3; }
  .hoy.mj .rep-acciones { flex-wrap: wrap; width: 100%; gap: 8px; min-width: 0; }
  .hoy.mj .segmento.vista.oscuro { order: 1; width: 100%; display: flex; }
  .hoy.mj .segmento.vista.oscuro a { flex: 1; text-align: center; padding: 9px 0; white-space: nowrap; }
  .hoy.mj .rep-acciones > .btn-mini { order: 2; width: 100%; justify-content: center; }
  .hoy.mj .cifras { background: none; box-shadow: none; padding: 0; margin-bottom: 14px; }
  .hoy.mj .cifras-fila { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .hoy.mj .cifra-b { background: #fff; border-radius: 14px; padding: 10px 12px; margin: 0; border: 0; box-shadow: 0 1px 2px rgba(20,48,77,.06); min-width: 0; }
  .hoy.mj .cifra-b small { font-size: .74rem; } .hoy.mj .cifra-b b { font-size: 1.3rem; margin-top: 2px; white-space: nowrap; letter-spacing: -.02em; } .hoy.mj .cifra-b b span { font-size: .8rem; }
  .hoy.mj .cifra-b em { font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hoy.mj .linea-dia { margin-top: 4px; } .hoy.mj .ld-ejes { margin-top: 6px; } .hoy.mj .ld-ejes .leyenda-centro { display: none; }
  .hoy.mj .hoy-dos { gap: 12px; }
  .hoy.mj .hoy-dos .col { gap: 12px; }
  .hoy.mj .hoy-dos .card { padding: 12px 14px 14px; border-radius: 18px; box-shadow: 0 1px 2px rgba(20,48,77,.05), 0 8px 20px rgba(20,48,77,.06); }
  .hoy.mj .card-cab.simple { margin-bottom: 4px; } .hoy.mj .card-cab.simple h3 { font-size: .95rem; }
  .hoy.mj .marcas li { padding: 9px 0; gap: 10px; } .hoy.mj .marcas b { font-size: .92rem; } .hoy.mj .marcas small { font-size: .74rem; } .hoy.mj .marcas .hora { font-size: .95rem; }
  .hoy.mj .det-lista li { grid-template-columns: 110px 1fr; }
  .hoy.mj .aviso-firmas .card-cab.simple { flex-wrap: wrap; gap: 8px; }
  /* «Mi jornada» en teléfono es sólo hoy: sin pestañas de periodo, sin constancia, sin vacaciones,
     sin solicitudes y sin aparatos. Todo eso vive en la pestaña «Reportes» (modo-reportes). */
  .hoy.mj.modo-jornada .segmento.vista.oscuro, .hoy.mj.modo-jornada .rep-acciones, .hoy.mj.modo-jornada .card-vacaciones,
  .hoy.mj.modo-jornada .card-solicitudes, .hoy.mj.modo-jornada .card-aparatos { display: none; }
  .hoy.mj.modo-jornada .hoy-cab > .solo-escritorio { display: block; }   /* el título sí cabe: «Mi jornada · Hoy · sábado 31» */
  /* Sin el título «Mi jornada» (ya lo dice la pestaña): sólo la fecha, chica, y el espacio se lo
     llevan las cuatro cifras. */
  .hoy.mj.modo-jornada .titulo-emp { display: none; } .hoy.mj.modo-jornada .hoy-cab { margin-top: 0; margin-bottom: 8px; min-height: 0; }
  .hoy.mj.modo-jornada .hoy-cab { display: none; }   /* ni título ni fecha: el día va en el icono de la pestaña */
  .hoy.mj.modo-jornada .cifra-b { padding: 12px 14px; } .hoy.mj.modo-jornada .cifra-b b { font-size: 1.5rem; margin-top: 3px; } .hoy.mj.modo-jornada .cifra-b small { font-size: .76rem; } .hoy.mj.modo-jornada .cifra-b em { font-size: .74rem; margin-top: 3px; }
  .hoy.mj.modo-jornada .cifras-fila { gap: 10px; margin-bottom: 14px; }
  .hoy.mj .aviso-firmas { margin-bottom: 4px; }
  /* En teléfono nadie registra aparatos a mano: se registra solo en la primera marca. */
  .hoy.mj .card-aparatos { display: none; }
  .hoy.mj.modo-reportes .hoy-cab { margin-bottom: 10px; } .hoy.mj.modo-reportes .titulo-emp { font-size: 1.45rem; }
  .hoy.mj.modo-reportes .card-vacaciones .det-lista li:not(:first-child), .hoy.mj.modo-reportes .card-vacaciones .solicitudes { display: grid; }
  .hoy.mj.modo-reportes .card-vacaciones > .nota-pie { display: block; }
  /* La píldora marca desde ella misma: su botón principal cabe si el reloj se queda sólo con la hora. */
  .pildora .marca-btn.principal { display: inline-flex; height: 34px; padding: 0 12px; font-size: .82rem; margin-left: 2px; }
  .pildora .marca-btn.principal[hidden] { display: none; }
  .pildora .chip-reloj { padding: 0 4px; } .pildora .chip-reloj > svg:first-child { display: none; } .pildora .sep { display: none; }
  .pildora .chip-estado { padding: 0 6px 0 8px; }
  /* Sólo lo importante en el teléfono: lo vacío no se enseña, vacaciones es una línea, y los
     textos largos de explicación se quedan en la computadora. */
  .hoy.mj .card-solicitudes.vacia { display: none; }
  .hoy.mj .card-marcas.vacia { padding-bottom: 12px; }
  .hoy.mj .card-vacaciones .det-lista li:not(:first-child), .hoy.mj .card-vacaciones .solicitudes, .hoy.mj .card-vacaciones > .nota-pie, .hoy.mj .card-vacaciones .det-nota { display: none; }
  .hoy.mj .card-vacaciones .det-lista li { grid-template-columns: 1fr auto; padding: 4px 0; } .hoy.mj .card-vacaciones .det-lista li:first-child { border-top: 0; }
  .hoy.mj .card-aparatos .nota-pie, .hoy.mj .card-aparatos .det-lista li.vacio-lista { display: none; }
  .hoy.mj .card-aparatos .pie-accion { margin-top: 6px; }
  .hoy.mj .aviso-firmas .vacio-lista { display: none; } .hoy.mj .aviso-firmas .card-cab.simple { margin-bottom: 0; } .hoy.mj .aviso-firmas .card-cab.simple h3 { font-size: .9rem; }
  .hoy.mj .aviso-firmas { padding: 12px 14px; margin-bottom: 14px; }
  .hoy.mj .segmento.vista.oscuro a { padding: 7px 0; font-size: .86rem; }
  .hoy.mj .rep-acciones > .btn-mini { order: 2; width: auto; margin-left: auto; padding: 4px 6px; font-size: .8rem; background: none; border: 0; box-shadow: none; color: var(--ts-teal-2); }
  .hoy.mj .rep-acciones { gap: 4px; }
  .hoy.mj .cifra-b { padding: 8px 10px; } .hoy.mj .cifra-b b { font-size: 1.15rem; } .hoy.mj .cifra-b small { font-size: .7rem; } .hoy.mj .cifra-b em { font-size: .68rem; }
  .hoy.mj .cifras { margin-bottom: 10px; } .hoy.mj .cifras-fila { gap: 6px; margin-bottom: 10px; }
  .hoy.mj .hoy-cab { margin-bottom: 10px; }
}
/* El día de hoy dentro del icono del calendario (barra lateral y barra del teléfono). */
.ico-dia text { font: 800 8.5px/1 "Inter", -apple-system, system-ui, sans-serif; fill: currentColor; stroke: none; letter-spacing: -.02em; }

/* ── La invitación a marcar: la píldora misma, que baja al centro y se abre ───────────────── */
.widget-marca { position: fixed; inset: 0; z-index: 40; }
.widget-marca[hidden] { display: none; }
.wm-fondo { position: absolute; inset: 0; background: rgba(20,48,77,.22); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: wmFondo .4s ease; }
@keyframes wmFondo { from { opacity: 0; } to { opacity: 1; } }
/* La tarjeta se posiciona y mide desde el guion (empieza en el lugar de la píldora). */
.wm-tarjeta { position: fixed; overflow: hidden; box-sizing: border-box; background: #fff; box-shadow: 0 24px 70px rgba(13,85,88,.26); padding: 0; text-align: center; }
/* La copia de la píldora dentro de la tarjeta: misma apariencia, pero sin borde ni fondo propios
   (los lleva la tarjeta), y al abrirse se centra y pierde su botón, que ya está en grande abajo. */
.wm-cab { display: flex; justify-content: flex-start; transition: justify-content .3s; }
.wm-tarjeta .pildora.wm-copia { border-color: transparent; background: none; box-shadow: none; pointer-events: none; }
.wm-tarjeta.abierta .wm-cab { justify-content: center; }
.wm-tarjeta.abierta .pildora.wm-copia .marca-btn, .wm-tarjeta.abierta .pildora.wm-copia .sync { display: none; }
.wm-cuerpo { padding: 6px 24px 18px; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.wm-tarjeta.abierta .wm-cuerpo { opacity: 1; transform: none; transition-delay: .28s; }
.wm-kicker { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 8px; }
.wm-tarjeta h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ts-navy); line-height: 1.15; }
.wm-tarjeta p { color: var(--ts-muted); font-size: .95rem; margin: 8px 0 18px; }
.wm-btn { display: inline-flex !important; width: 100%; justify-content: center; height: 56px; font-size: 1.08rem; border-radius: 999px; }
.wm-btn[hidden] { display: none !important; }
.wm-btn svg { width: 20px; height: 20px; }
.wm-luego { display: block; width: 100%; margin-top: 8px; padding: 12px; background: none; border: 0; font: inherit; font-size: .92rem; font-weight: 700; color: var(--ts-muted); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wm-tarjeta { transition: none !important; } .wm-cuerpo { transition: none; } }

/* Velo detrás de la píldora abierta: le da el énfasis. La barra de arriba queda por encima. */
.velo-pildora { position: fixed; inset: 0; z-index: 4; background: rgba(15,30,45,.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: veloEntra .22s ease; }
.velo-pildora[hidden] { display: none; }
@keyframes veloEntra { from { opacity: 0; } to { opacity: 1; } }
body.pildora-abierta .tabbar { z-index: 3; }

/* Panel de la píldora en teléfono: aireado. Ya no repite lo de las tarjetas, así que tiene espacio. */
@media (max-width: 1024px) {
  .pildora-panel { padding: 16px 16px 14px; border-radius: 26px; box-shadow: 0 28px 70px rgba(13,40,60,.28); border-color: rgba(255,255,255,.6); }
  .panel-marcar { gap: 10px; padding-bottom: 14px; margin-bottom: 12px; }
  .panel-marcar .marca-btn { height: 50px; font-size: .98rem; }
  .panel-acciones { gap: 8px; padding-bottom: 14px; margin-bottom: 10px; flex-wrap: wrap; }
  .panel-acciones::-webkit-scrollbar { display: none; }
  .panel-btn { height: 36px; padding: 0 14px; font-size: .84rem; flex-shrink: 0; gap: 6px; }
  .panel-btn svg { width: 14px; height: 14px; }
  .panel-titulo { font-size: .68rem; letter-spacing: .14em; margin: 2px 4px 8px; }
  .panel-resumen li { flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 4px; font-size: .9rem; line-height: 1.35; }
  .panel-resumen li span { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--ts-muted); }
  .panel-resumen li b { font-weight: 600; text-align: left; font-size: .95rem; }
  .panel-enlace { font-size: .86rem; margin: 10px 4px 0; }
  /* Lo que ya dicen las cuatro tarjetas de «Mi jornada» no se repite aquí. */
  .panel-resumen li:has(#llevasVivo), .panel-resumen li:has(#faltanVivo), .panel-resumen li:has(#semanaTxt),
  .panel-resumen li:has(#huellaTxt), .panel-resumen li:has(#trabajadoTxt) { display: none; }
}

/* ¿Para qué es tu pausa? */
.motivo-pausa { position: fixed; inset: 0; z-index: 41; display: flex; align-items: flex-start; justify-content: center; padding: calc(84px + env(safe-area-inset-top)) 16px 16px; pointer-events: none; }
.motivo-pausa[hidden] { display: none; }
.mp-tarjeta { pointer-events: auto; width: min(420px, 100%); background: #fff; border-radius: 26px; padding: 20px 18px 10px; text-align: center; box-shadow: 0 28px 70px rgba(13,40,60,.28); animation: wmEntra .25s cubic-bezier(.16,1,.3,1); }
.mp-tarjeta > b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ts-navy); margin-bottom: 14px; }
.mp-opciones { display: flex; gap: 10px; }
.mp-opciones .marca-btn { flex: 1; height: 52px; justify-content: center; font-size: 1rem; border-radius: 999px; display: inline-flex; }
.mp-opciones .marca-btn svg { width: 18px; height: 18px; }
.mp-cancelar { margin-top: 8px; padding: 10px; width: 100%; background: none; border: 0; font: inherit; font-weight: 700; font-size: .88rem; color: var(--ts-muted); cursor: pointer; }
.marcas li.comida-presumida b { color: var(--ts-muted); }

/* Fondo quieto mientras la píldora está abierta (o la tarjeta de marcar, o la de motivo). */
html.sin-scroll, html.sin-scroll body { overflow: hidden; overscroll-behavior: none; }
.pildora-panel { overscroll-behavior: contain; }

/* Píldora en teléfono: sin hora (la da el teléfono arriba). En su lugar, la acción secundaria
   como icono redondo: pausa con la jornada en curso, salida en pausa. */
@media (max-width: 1024px) {
  .pildora .chip-reloj { display: none; }
  .pildora .marca-btn.secundario { display: inline-flex; width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; margin: 0 2px 0 4px; }
  .pildora .marca-btn.secundario[hidden] { display: none; }
  .pildora .marca-btn.secundario span { display: none; }
  .pildora .marca-btn.secundario svg { width: 16px; height: 16px; }
  .pildora .chip-estado { padding: 0 6px 0 10px; }
}

/* Pendientes de la píldora: un renglón por motivo, para que se entienda su color. */
#pendientesTxt .pend-item { display: block; font-style: normal; white-space: normal; color: var(--ts-navy); font-weight: 600; } #pendientesTxt .pend-item + .pend-item { margin-top: 8px; }
/* El punto va pegado a la última palabra, en la misma línea (no flotando a la derecha). */
#pendientesTxt .pend-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.panel-resumen li:has(#pendientesTxt) b { width: 100%; }

/* Panel con scroll propio si no cabe en la pantalla. */
.pildora-panel { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px - env(safe-area-inset-top)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Resumen del día terminado */
.fin-jornada { text-align: center; padding: 4px 4px 12px; border-bottom: 1px solid #EEF1F4; margin-bottom: 12px; }
.fin-kicker { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-muted); margin-top: 4px; }
.fin-grande { font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; color: var(--ts-navy); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fin-de { font-size: .86rem; color: var(--ts-muted); margin-bottom: 12px; }
.fin-cifras { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.fin-cifras li { background: #F5F7FB; border-radius: 14px; padding: 9px 12px; }
.fin-cifras span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--ts-muted); text-transform: uppercase; }
.fin-cifras b { display: block; font-size: .9rem; font-weight: 700; color: var(--ts-navy); margin-top: 2px; line-height: 1.3; }
.fin-alerta { text-align: left; border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.fin-alerta b { display: block; font-size: .95rem; font-weight: 800; } .fin-alerta p { font-size: .86rem; margin-top: 3px; line-height: 1.4; }
.fin-alerta .panel-btn { margin-top: 10px; }
.fin-alerta.rojo { background: #FDE8E8; color: #B42318; } .fin-alerta.naranja { background: #FDE7D5; color: #C2410C; }
.fin-alerta.ambar { background: #FFF4DC; color: #B45309; } .fin-alerta.verde { background: #E3F6EE; color: #0B7A52; }
/* Con el resumen a la vista, no se repite lo que ya dice (entrada, salida, trabajado, resultado). */
.pildora-panel.con-fin .panel-resumen li:has(#entradaTxt), .pildora-panel.con-fin .panel-resumen li:has(#salidaTxt),
.pildora-panel.con-fin .panel-resumen li:has(#trabajadoTxt), .pildora-panel.con-fin .panel-resumen li:has(#resultadoTxt),
.pildora-panel.con-fin .panel-resumen li:has(#comidaTxt), .pildora-panel.con-fin .panel-marcar { display: none; }
.panel-btn.ambar { background: #FFF4DC; color: #B45309; } .panel-btn.ambar:hover { background: #FDEBC8; color: #B45309; }
.fin-reanudar { text-align: center; border-top: 1px solid #EEF1F4; margin-top: 12px; padding-top: 14px; }
.fin-reanudar p { font-size: .8rem; color: var(--ts-muted); margin-bottom: 10px; line-height: 1.4; }
.fin-reanudar .panel-btn { margin: 0 auto; }

/* Constancia destacada (Reportes) */
.constancia-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px 14px; align-items: center; margin-bottom: 16px; background: linear-gradient(135deg, #E9F7F7, #FFFFFF 70%); }
.constancia-card .cc-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--ts-teal); color: #fff; display: flex; align-items: center; justify-content: center; }
.constancia-card .cc-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.constancia-card .cc-txt b { display: block; font-size: 1rem; color: var(--ts-navy); } .constancia-card .cc-txt span { display: block; font-size: .82rem; color: var(--ts-muted); margin-top: 2px; line-height: 1.35; }
.constancia-card .cc-btn { grid-column: 1 / -1; display: inline-flex; justify-content: center; height: 46px; border-radius: 999px; text-decoration: none; font-size: .95rem; }
@media (min-width: 1025px) { .constancia-card { grid-template-columns: 44px 1fr auto; } .constancia-card .cc-btn { grid-column: auto; padding: 0 22px; } }
.vac-sin { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .vac-sin small { font-size: .8rem; color: var(--ts-muted); }
@media (max-width: 1024px) {
  /* Reportes en teléfono: sin título (lo dice la pestaña), el periodo como línea chica; la
     constancia ya está arriba, así que el enlace pequeño sobra. */
  .hoy.mj.modo-reportes .titulo-emp { display: none; }
  .hoy.mj.modo-reportes .hoy-cab .fecha { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-muted); }
  .hoy.mj.modo-reportes .rep-acciones > .btn-mini { display: none; }
  .hoy.mj.modo-reportes .card-solicitudes .nota-pie { display: none; }
  .hoy.mj.modo-reportes .card-vacaciones > .nota-pie, .hoy.mj.modo-reportes .card-vacaciones .solicitudes { display: none; }
  .hoy.mj.modo-reportes .cifras { margin-bottom: 14px; }
}

/* Navegar periodos */
.periodo-nav { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #E3E8EC; border-radius: 12px; padding: 3px; font-size: .86rem; font-weight: 700; color: var(--ts-navy); }
.periodo-nav span:not(.pn-flecha) { padding: 0 8px; white-space: nowrap; }
.pn-flecha { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts-navy); text-decoration: none; }
.pn-flecha:hover { background: #F3F6F8; } .pn-flecha.apagada { opacity: .25; }
.pn-flecha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) { .hoy.mj .periodo-nav { order: 0; width: 100%; justify-content: space-between; } }
/* Constancia: dos botones */
.constancia-card .cc-botones { grid-column: 1 / -1; display: flex; gap: 10px; }
.constancia-card .cc-botones .marca-btn { flex: 1; display: inline-flex; justify-content: center; height: 46px; border-radius: 999px; text-decoration: none; font-size: .95rem; }
@media (min-width: 1025px) { .constancia-card { grid-template-columns: 44px 1fr auto; } .constancia-card .cc-botones { grid-column: auto; } .constancia-card .cc-botones .marca-btn { padding: 0 20px; } }
/* Solicitudes que se abren */
.solicitudes.mias li.sol-li { display: block; padding: 0; }
.sol-li details > summary { list-style: none; cursor: pointer; padding: 12px 0; } .sol-li details > summary::-webkit-details-marker { display: none; }
.sol-li details[open] > summary { padding-bottom: 6px; }
.sol-det { padding: 4px 0 14px; } .sol-det li { grid-template-columns: 96px 1fr !important; }
.sol-foto { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; margin-top: 4px; object-fit: cover; }

/* Periodo: la fecha centrada; el centro de la barra abre el selector. */
.hoy.mj.modo-reportes .hoy-cab > div:first-child, .hoy.mj.modo-reportes .hoy-cab .fecha { text-align: center; width: 100%; }
.pn-centro { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: none; border: 0; font: inherit; font-weight: 700; color: var(--ts-navy); cursor: pointer; padding: 6px 8px; border-radius: 9px; white-space: nowrap; }
.pn-centro:hover { background: #F3F6F8; } .pn-centro svg { width: 15px; height: 15px; fill: none; stroke: var(--ts-teal-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hoy.mj.cargando { opacity: .55; transition: opacity .15s; pointer-events: none; }
.selector-rango { position: fixed; inset: 0; z-index: 45; background: rgba(15,30,45,.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.selector-rango[hidden] { display: none; }
.sr-tarjeta { width: min(460px, 100%); background: #fff; border-radius: 26px; padding: 20px 18px 10px; box-shadow: 0 28px 70px rgba(13,40,60,.28); animation: wmEntra .25s cubic-bezier(.16,1,.3,1); margin-bottom: env(safe-area-inset-bottom); }
.sr-tarjeta > b { display: block; text-align: center; font-size: 1.1rem; font-weight: 800; color: var(--ts-navy); margin-bottom: 14px; }
.sr-atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sr-atajos button { height: 42px; border-radius: 12px; border: 1px solid #E3E8EC; background: #F7F9FA; font: inherit; font-weight: 700; font-size: .88rem; color: var(--ts-navy); cursor: pointer; }
.sr-atajos button:hover { border-color: var(--ts-teal); color: var(--ts-teal-2); }
.sr-libre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.sr-libre label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--ts-muted); text-transform: uppercase; letter-spacing: .06em; }
.sr-libre input { font: inherit; font-size: .95rem; padding: 10px 10px; border: 1px solid #DDE2EA; border-radius: 12px; background: #F7F9FA; color: var(--ts-navy); min-width: 0; }
.sr-ver { display: inline-flex; width: 100%; justify-content: center; height: 50px; border-radius: 999px; font-size: 1rem; }
.btn-mini.apagado { opacity: .55; }
@media (min-width: 1025px) { .selector-rango { align-items: center; } }

/* Mis incidencias (trabajador) */
.mis-inc .pedir-card { margin-bottom: 14px; }
.pedir-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pedir-tipo { text-align: left; background: #F5F7FB; border: 1px solid #E8EDF1; border-radius: 16px; padding: 12px 12px 11px; font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.pedir-tipo:hover, .pedir-tipo:active { border-color: var(--ts-teal); background: #EEF7F7; }
.pedir-tipo b { display: block; font-size: .92rem; color: var(--ts-navy); } .pedir-tipo small { display: block; font-size: .74rem; color: var(--ts-muted); margin-top: 2px; line-height: 1.3; }
.pedir-vac { display: block; margin-top: 12px; font-size: .84rem; font-weight: 700; color: var(--ts-teal-2); text-decoration: none; }
.hoy.mj.mis-inc .inc-tabs { display: flex; width: 100%; margin-bottom: 12px; order: 0; } .mis-inc .inc-tabs a { flex: 1; text-align: center; }
.pedir-form .pf-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; max-height: 52vh; overflow-y: auto; }
.pf-c { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--ts-muted); text-transform: uppercase; letter-spacing: .05em; }
.pf-c[hidden] { display: none; } .pf-ancho { grid-column: 1 / -1; }
.pf-c input, .pf-c select, .pf-c textarea { font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; font-weight: 500; padding: 10px; border: 1px solid #DDE2EA; border-radius: 12px; background: #F7F9FA; color: var(--ts-navy); min-width: 0; width: 100%; }
.pf-c input[type=file] { padding: 8px; font-size: .85rem; }
.sol-retirar { margin: -4px 0 12px; }


.hoy.mj.mis-inc { display: flex; flex-direction: column; }

/* Mis incidencias: las pestañas van antes de su lista (el orden general del teléfono las manda al final). */
@media (max-width: 1024px) { .hoy.mj.mis-inc .segmento.vista.oscuro.inc-tabs { order: 0; } .hoy.mj.mis-inc > * { order: 0; } }
.pedir-tipo[data-tipo=otro] { border-style: dashed; background: #fff; }
.mis-inc .card-solicitudes .pedir-vac { margin-top: 4px; }
.modal-cab .ico.libre { background: #E9F7F7; color: var(--ts-teal-2); }
#modalPedir .campo input[type=date], #modalPedir .campo input[type=time] { width: 100%; }
.pf-v[hidden] { display: none; }
#pfIco .ico-libre { display: none; } #pfIco.libre .ico-alerta { display: none; } #pfIco.libre .ico-libre { display: block; }
#modalPedir .campo small { display: block; margin-top: 6px; font-size: .8rem; color: var(--ts-muted); }

/* Cuenta, como en cualquier app: foto en círculo, bloques, y «Cerrar sesión» hasta abajo. */
.hoy.cta2 { display: block; height: auto; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-perfil { text-align: center; padding: 8px 0 18px; }
.cta-foto { position: relative; display: inline-block; width: 104px; height: 104px; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--ts-teal), #157F82); box-shadow: 0 10px 28px rgba(15,60,80,.18); }
.cta-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cta-foto > span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; }
.cta-cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #E3E8EC; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.cta-cam svg { width: 17px; height: 17px; fill: none; stroke: var(--ts-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta-perfil h2 { margin-top: 12px; font-size: 1.35rem; font-weight: 800; color: var(--ts-navy); letter-spacing: -.01em; }
.cta-perfil p { color: var(--ts-muted); font-size: .9rem; } .cta-perfil .cta-sub { font-size: .82rem; margin-top: 2px; }
.cta-quitar { margin-top: 6px; } .cta-quitar .enlace-btn { background: none; border: 0; color: var(--ts-muted); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.cta-bloque { margin-bottom: 14px; } .cta-bloque > h3 { font-size: 1rem; font-weight: 800; color: var(--ts-navy); margin-bottom: 10px; }
.cta-bloque .campo-adm { display: block; margin-bottom: 10px; }
.cta-guardar { width: 100%; height: 44px; justify-content: center; margin-top: 4px; }
.cta-lista { list-style: none; padding: 0; margin: 0; }
.cta-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F4F6; } .cta-lista li:last-child { border-bottom: 0; }
.cta-lista li > div { flex: 1; min-width: 0; } .cta-lista b { display: block; font-size: .92rem; color: var(--ts-navy); } .cta-lista small { display: block; font-size: .78rem; color: var(--ts-muted); }
.cta-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; background: #EEF7F7; color: var(--ts-teal-2); display: flex; align-items: center; justify-content: center; }
.cta-ico.ok { background: #E8F6EE; color: #0F7A45; } .cta-ico.falta { background: #FFF4E5; color: #B45309; }
.cta-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta-nota { font-size: .8rem; color: var(--ts-muted); margin-top: 8px; line-height: 1.4; }
.cta-plegable { border-bottom: 1px solid #F1F4F6; padding: 4px 0 10px; margin-bottom: 8px; }
.cta-plegable > summary { cursor: pointer; font-weight: 700; color: var(--ts-navy); font-size: .92rem; padding: 6px 0; list-style: none; display: flex; justify-content: space-between; }
.cta-plegable > summary::-webkit-details-marker { display: none; } .cta-plegable > summary::after { content: '›'; color: var(--ts-muted); transition: transform .2s; } .cta-plegable[open] > summary::after { transform: rotate(90deg); }
.cta-plegable form { margin-top: 8px; }
.cta-fila { display: flex; justify-content: space-between; font-size: .9rem; padding: 6px 0 10px; } .cta-fila span { color: var(--ts-muted); } .cta-fila b { color: var(--ts-navy); }
.cta-ir a { display: block; padding: 10px 0; font-weight: 700; color: var(--ts-navy); text-decoration: none; border-bottom: 1px solid #F1F4F6; } .cta-ir a:last-child { border-bottom: 0; }
.cta-salir button { width: 100%; height: 50px; border-radius: 16px; border: 1px solid #F3D3D0; background: #fff; color: #B42318; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; margin-top: 4px; }
.cta-version { text-align: center; font-size: .72rem; color: #A0AAB4; margin: 14px 0 6px; letter-spacing: .08em; text-transform: uppercase; }
/* El círculo en la barra de abajo */
.tab-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ts-teal), #157F82); color: #fff; font-size: .78rem; font-weight: 800; }
.tab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tabbar a.tab-cuenta.activo .tab-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ts-teal); }
.cta-bloque .campo-adm > span em { display: block; font-style: normal; font-weight: 500; font-size: .76rem; color: var(--ts-muted); margin: 1px 0 2px; }
.cta-bloque .campo-adm > span { display: block; }

/* Aviso: el día anterior quedó sin salida */
.aviso-ayer { display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: center; margin-bottom: 14px; border: 1px solid #F6C9C4; background: linear-gradient(135deg, #FDECEA, #FFFFFF 75%); }
.aviso-ayer[hidden] { display: none; }
.aviso-ayer .aa-ico { width: 40px; height: 40px; border-radius: 12px; background: #FADBD7; color: #B42318; display: flex; align-items: center; justify-content: center; }
.aviso-ayer .aa-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-ayer b { display: block; color: #8A1C12; font-size: .98rem; } .aviso-ayer small { display: block; color: #6B3A35; font-size: .82rem; line-height: 1.35; margin-top: 2px; }
.aviso-ayer .aa-btn { grid-column: 1 / -1; display: inline-flex; justify-content: center; height: 44px; border-radius: 999px; font-size: .92rem; }
.cta-mini { background: none; border: 0; color: var(--ts-muted); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
#btnDomicilio { display: inline-flex; gap: 8px; align-items: center; }
.dom-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .dom-acciones .campo-in { flex: 1; min-width: 140px; }

/* Documentos a firmar: párrafos que se acomodan al ancho, no renglones cortados a mano. */
.bienvenida .doc-texto { white-space: normal; }
.bienvenida .doc-texto p { margin: 0 0 10px; } .bienvenida .doc-texto p:first-child { font-weight: 700; } .bienvenida .doc-texto p:last-child { margin-bottom: 0; }
/* Laptop (1025 a 1699 px): la píldora no cabe entre el título y los botones de la derecha y se
   les encimaba. Aquí la cabecera baja a su propio renglón, debajo de la píldora. En monitor
   grande se queda como estaba: todo en una línea. */
@media (min-width: 1025px) and (max-width: 1699px) {
  .hoy { margin-top: 0; height: calc(100vh - 156px); height: calc(100dvh - 156px); }
  .hoy.mj { height: auto; min-height: 0; }
  body:has(.hoy.mj) .topbar { padding-top: 14px; }
}
@media (min-width: 1025px) { .card-vacaciones .det-lista li { grid-template-columns: 170px 1fr; } }
@media (min-width: 1025px) { .bienvenida { margin: 0 auto; } }

/* «Mi jornada» es sólo hoy, en teléfono y en computadora: lo demás (otros periodos, constancia,
   vacaciones, solicitudes) vive en «Mis reportes», y los aparatos en «Cuenta». La lógica es la
   misma; en computadora sólo cambia la distribución. */
.hoy.mj.modo-jornada .segmento.vista.oscuro, .hoy.mj.modo-jornada .rep-acciones, .hoy.mj.modo-jornada .card-vacaciones,
.hoy.mj.modo-jornada .card-solicitudes, .hoy.mj.modo-jornada .card-aparatos { display: none; }
@media (min-width: 1025px) {
  .hoy.mj.modo-jornada .hoy-dos, .hoy.mj.modo-jornada .hoy-dos.vacias-izq { grid-template-columns: 1fr; }
  .hoy.mj.modo-jornada .hoy-dos > .col:last-child:not(:has(> :not(.card-vacaciones, .card-solicitudes, .card-aparatos))) { display: none; }
  .hoy.mj.modo-jornada .hoy-dos .card.vacia { flex: none; }
}
.sidebar .usuario .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* «Mis reportes» en computadora: misma lógica que en teléfono —la constancia va en su tarjeta, no
   repetida arriba, y los aparatos viven en «Cuenta»—; la cabecera se alinea a la izquierda. */
.hoy.mj.modo-reportes .rep-acciones > .btn-mini, .hoy.mj.modo-reportes .card-aparatos { display: none; }
@media (min-width: 1025px) { .hoy.mj.modo-reportes .hoy-cab > div:first-child, .hoy.mj.modo-reportes .hoy-cab .fecha { text-align: left; width: auto; } }

/* Incidencias: una pestaña por tipo de pendiente, cada una con su lista completa. */
.inc-controles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.segmento.inc-tipos { background: #fff; }
.num-seg.rojo { background: #FDE8E8; color: #B42318; }
.inc-lista { padding-bottom: 12px; }
.inc-lista .nota-lado { margin: 0 0 8px; }
.inc-filas { list-style: none; }
.inc-filas > li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid #F1F4F6; }
.inc-filas > li:first-child { border-top: 0; }
.inc-filas > li.vacio-lista { display: block; color: var(--ts-muted); padding: 10px 4px; }
.inc-filas .avatar { width: 40px; height: 40px; border-radius: 50%; background: #E6F4F4; color: var(--ts-teal-2); font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.inc-filas .if-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inc-filas .if-txt b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ts-navy); }
.inc-filas .if-txt small { color: var(--ts-muted); font-size: .86rem; }
.inc-filas .if-txt .enlace { font-size: .84rem; font-weight: 700; width: fit-content; }
.inc-filas .if-acciones { display: flex; gap: 8px; align-items: center; }
.inc-filas .if-acciones .campo-in { width: 220px; }
.inc-filas .estado-chip { font-size: .72rem; padding: 3px 9px; } .inc-filas .estado-chip.aprobada { background: #E3F6EE; color: #0B7A52; } .inc-filas .estado-chip.rechazada { background: #FDE8E8; color: #B42318; }
@media (max-width: 1024px) {
  .inc-controles { width: 100%; justify-content: stretch; } .inc-controles .segmento { width: 100%; display: flex; } .inc-controles .segmento a { flex: 1; text-align: center; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
  .inc-filas > li { grid-template-columns: 36px 1fr; } .inc-filas .if-acciones, .inc-filas > li > .btn-mini { grid-column: 1 / -1; flex-wrap: wrap; }
  .inc-filas .if-acciones .campo-in { width: 100%; } .inc-filas .if-acciones .btn-mini { flex: 1; }
}
@media (max-width: 1024px) { .inc-controles .segmento { min-width: 0; } .inc-controles .segmento.inc-tipos a { font-size: .84rem; padding-left: 4px; padding-right: 4px; } .inc-controles .num-seg { margin-left: 2px; } }
.inc-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.inc-filtro .chip-op { text-decoration: none; font-size: .8rem; padding: 6px 11px; }
.inc-filtro .chip-op span { font-weight: 800; margin-left: 3px; opacity: .7; }
.inc-filtro .chip-op.activo { background: var(--ts-navy); color: #fff; border-color: var(--ts-navy); }
/* Invitación a marcar en computadora: más grande, y crece desde la píldora hacia abajo. */
@media (min-width: 1025px) {
  .wm-cab { transition: padding-top .52s cubic-bezier(.2,.8,.2,1); }
  .wm-tarjeta.abierta .wm-cab { padding-top: 14px; }
  .wm-cuerpo { padding: 14px 44px 30px; }
  .wm-kicker { font-size: .78rem; margin-bottom: 10px; }
  .wm-tarjeta h2 { font-size: 2.05rem; }
  .wm-tarjeta p { font-size: 1.06rem; margin: 10px 0 26px; }
  .wm-btn { height: 62px; font-size: 1.14rem; max-width: 460px; }
  .wm-luego { font-size: .98rem; margin-top: 10px; }
}
/* Importar personal */
.imp-subir { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.imp-zona { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 2px dashed #C9D6DE; border-radius: 18px; background: #F7FAFB; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.imp-zona input { display: none; }
.imp-zona svg { width: 34px; height: 34px; fill: none; stroke: var(--ts-teal-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.imp-zona b { color: var(--ts-navy); } .imp-zona small { color: var(--ts-muted); font-size: .84rem; }
.imp-zona.encima, .imp-zona:hover { border-color: var(--ts-teal); background: #EEF8F8; }
.imp-zona.con-archivo { border-style: solid; border-color: var(--ts-teal); background: #EEF8F8; }
.imp-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.imp-pasos div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #F7F9FA; font-size: .86rem; color: var(--ts-muted); } .imp-pasos b { color: var(--ts-navy); }
.imp-origen { color: var(--ts-muted); font-size: .86rem; margin: -6px 0 12px; }
.imp-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.imp-resumen div { padding: 14px 16px; border-radius: 14px; background: #F3F6F8; display: flex; flex-direction: column; }
.imp-resumen b { font-size: 1.7rem; color: var(--ts-navy); line-height: 1.1; } .imp-resumen span { font-size: .84rem; color: var(--ts-muted); }
.imp-resumen .ok { background: #E3F6EE; } .imp-resumen .ok b { color: #0B7A52; }
.imp-resumen .mal { background: #FDE8E8; } .imp-resumen .mal b { color: #B42318; }
.imp-falta { border-left: 3px solid #B42318; margin-bottom: 12px; }
.imp-bloque { border: 1px solid #E6EBEF; border-radius: 16px; padding: 4px 16px; margin-bottom: 12px; }
.imp-bloque summary { cursor: pointer; padding: 12px 0; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.imp-bloque summary::-webkit-details-marker { display: none; }
.imp-bloque summary b { color: var(--ts-navy); } .imp-bloque summary span { font-size: .84rem; color: var(--ts-muted); }
.imp-bloque[open] summary { border-bottom: 1px solid #EEF1F4; margin-bottom: 12px; }
.imp-mapeo, .imp-centros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.imp-defecto { max-width: 340px; margin-bottom: 12px; }
.imp-bloque .acepto { display: flex; gap: 8px; align-items: center; font-size: .9rem; margin: 4px 0 12px; }
.imp-revisar-btn { margin: 4px 0 16px; }
.imp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.imp-tabs .chip-op { font-size: .8rem; padding: 6px 12px; } .imp-tabs .chip-op.activo { background: var(--ts-navy); border-color: var(--ts-navy); }
.imp-tabla { max-height: 520px; overflow: auto; border: 1px solid #EEF1F4; border-radius: 12px; }
.imp-tabla td, .imp-tabla th { white-space: nowrap; font-size: .84rem; }
.imp-tabla td.imp-notas { white-space: normal; min-width: 260px; } .imp-notas span { display: block; }
.imp-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #10B981; }
.imp-omitida .imp-punto { background: #B8C2C8; } .imp-error .imp-punto { background: #EF4444; } .imp-error { background: #FFF7F7; }
.imp-omitida td { color: var(--ts-muted); }
.verde-t { color: #0B7A52; }
.imp-confirmar { margin-top: 16px; } .imp-confirmar .acepto { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin-bottom: 8px; } .imp-confirmar .acepto input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
@media (max-width: 1024px) { .imp-pasos, .imp-resumen { grid-template-columns: 1fr; } }
.imp-notas .rojo-t { color: #B42318; } .imp-notas .ambar-t { color: #B45309; } .imp-falta .rojo-t, .imp-mapeo .rojo-t { color: #B42318; }
.imp-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px 20px; }
.imp-subir .btn-mini { align-self: flex-start; }
.imp-tabla { flex: none; }
@media (max-width: 1200px) { .imp-cuerpo { overflow: visible; } }
.acceso-usuario { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; background: #EEF8F8; margin: 6px 0 16px; }
.acceso-usuario span { font-size: .8rem; color: var(--ts-muted); } .acceso-usuario b { font-size: 1.1rem; color: var(--ts-navy); word-break: break-all; }
.hero-card .sub.chica { font-size: .82rem; margin: 2px 0 14px; }
.hero-card .campo-in { width: 100%; }
.acceso-tarjetas { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: #EEF8F8; margin-bottom: 14px; }
.acceso-tarjetas div { display: flex; flex-direction: column; gap: 3px; } .acceso-tarjetas b { color: var(--ts-navy); } .acceso-tarjetas span { font-size: .86rem; color: var(--ts-muted); }
@media (max-width: 1024px) { .acceso-tarjetas { flex-direction: column; align-items: stretch; } }
.cartel-config { margin: 0 26px 14px; padding: 14px 16px; border-radius: 16px; background: #EEF8F8; flex-shrink: 0; }
.cartel-config .cc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.cartel-config .campo-adm.en-linea { min-width: 260px; }
.cartel-config .cc-txt { flex: 1 1 100%; display: flex; flex-direction: column; gap: 3px; } .cartel-config .cc-txt b { color: var(--ts-navy); } .cartel-config .cc-txt span { font-size: .84rem; color: var(--ts-muted); }
.cartel-config .cc-imprimir { display: flex; gap: 8px; align-items: center; margin-left: auto; }