/**
 * Control de fichaje  ·  Avisos de fichaje sobre DayControl
 *
 * Propiedad de Vientsur Energía, S.L.
 * Copyright (c) 2026 Vientsur Energía, S.L. Todos los derechos reservados.
 *
 * Este programa, su código fuente, su arquitectura, su base de datos, sus
 * interfaces, sus textos y cuanta documentación lo acompaña son propiedad
 * íntegra y exclusiva de Vientsur Energía, S.L., titular de la totalidad de
 * los derechos de explotación sobre la obra, conforme al Real Decreto
 * Legislativo 1/1996, de 12 de abril, por el que se aprueba el texto
 * refundido de la Ley de Propiedad Intelectual, y a la Directiva 2009/24/CE
 * del Parlamento Europeo y del Consejo, sobre la protección jurídica de
 * programas de ordenador.
 *
 * Queda prohibida, sin autorización previa, expresa y por escrito del
 * titular, cualquier forma de reproducción, copia, distribución,
 * comunicación pública, puesta a disposición, transformación, adaptación,
 * traducción, cesión, sublicencia, arrendamiento o préstamo, total o
 * parcial, de este programa o de cualquiera de sus partes, así como su
 * descompilación, desensamblado o ingeniería inversa por cualquier medio,
 * y su uso fuera de las instalaciones, equipos y finalidades expresamente
 * autorizados por el titular.
 *
 * El mero acceso a este código, por el motivo que sea, no otorga licencia,
 * derecho ni expectativa de derecho alguno sobre él. Quien lo obtenga sin
 * autorización queda obligado a comunicarlo al titular y a destruir todas
 * las copias en su poder.
 *
 * El programa trata datos de jornada y datos personales de trabajadores,
 * sometidos al Reglamento (UE) 2016/679 y a la Ley Orgánica 3/2018. Su
 * contenido tiene carácter confidencial; la difusión, copia o uso indebido
 * tanto del programa como de los datos puede dar lugar a responsabilidad
 * civil, penal y administrativa.
 *
 * Cualquier autorización, cesión de uso o licencia debe constar por escrito
 * y firmada por Vientsur Energía, S.L.
 */
/* Panel de avisos de fichaje. Sin dependencias externas. */
/* La aplicación va siempre en oscuro, con el fondo azul de la casa: no sigue
   el tema del navegador, para que se vea igual en todos los ordenadores. */
:root{
  --fondo:#0d1117; --tarjeta:#161b22; --texto:#e6edf3; --suave:#9198a1;
  --borde:#30363d; --rojo:#b42318; --rojo-suave:#2d1513; --verde:#067647;
  --verde-suave:#0d2019; --ambar:#b54708; --ambar-suave:#2b1d05;
  --primario:#0B2545; --acento:#C9A24B; --radio:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
     font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1080px;margin:0 auto;padding:20px 16px 60px}

.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
       background:var(--primario);color:#fff;padding:12px 16px;
       position:sticky;top:0;z-index:10;padding-top:max(12px,env(safe-area-inset-top))}
.marca{display:flex;align-items:center;gap:10px}
.marca small{display:block;opacity:.75;font-size:12px}
.punto{width:10px;height:10px;border-radius:50%;background:var(--acento);flex:0 0 auto}
.barra-acciones{display:flex;gap:8px;flex-wrap:wrap}

.boton{border:0;border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;
       cursor:pointer;text-decoration:none;display:inline-block;background:var(--acento);color:#0b2545}
.boton.fantasma{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.boton.fantasma:hover{background:rgba(255,255,255,.12)}
.boton.pequeno{padding:6px 12px;font-size:13px}
.boton.neutro{background:var(--borde);color:var(--texto)}
.boton[disabled]{opacity:.5;cursor:default}

.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.dato{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:14px 16px}
.dato .cifra{font-size:30px;font-weight:700;line-height:1.1}
.dato .rotulo{color:var(--suave);font-size:13px}
.dato.alerta{border-color:var(--rojo);background:var(--rojo-suave)}
.dato.alerta .cifra{color:var(--rojo)}

.titulo-seccion{font-size:16px;margin:26px 0 12px;display:flex;align-items:center;gap:8px}
.apunte{color:var(--suave);font-weight:400;font-size:13px}

.aviso{background:var(--tarjeta);border:1px solid var(--borde);border-left:4px solid var(--rojo);
       border-radius:var(--radio);padding:14px 16px;margin-bottom:10px;
       display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.aviso .quien{font-weight:600}
.aviso .que{color:var(--suave);font-size:14px}
.aviso .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.aviso.avisado{border-left-color:var(--ambar);background:var(--ambar-suave)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.persona{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:12px 14px;border-left:5px solid var(--borde);cursor:pointer;
  transition:box-shadow .15s ease,transform .15s ease}
.persona:hover{box-shadow:0 4px 14px rgba(0,0,0,.10)}
.persona:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.persona.desplegada{box-shadow:0 6px 20px rgba(0,0,0,.14)}

/* Lo que aparece al pinchar la ficha: como avisar a esa persona. */
.persona .detalle{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--borde)}
.persona.desplegada .detalle{display:block}
.persona .detalle .incidencia + .incidencia{margin-top:10px}
.persona .detalle .que{color:var(--suave);font-size:13px;margin-bottom:8px}
.persona .detalle .acciones{display:flex;flex-wrap:wrap;gap:6px}
.persona .detalle .nada{margin:0;color:var(--suave);font-size:13px}
.persona .cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.persona h3{margin:0 0 2px;font-size:15px}
.persona .meta{color:var(--suave);font-size:12.5px}
.persona .marcas{margin-top:8px;font-variant-numeric:tabular-nums;font-size:13px;color:var(--suave)}
.persona .que-falta{margin-top:6px;font-size:13px;font-weight:600;color:var(--rojo)}

/* El color de la tarjeta es lo que se lee a un metro: rojo falta algo,
   verde todo en regla. Lo demas se queda apagado. */
.p-falta{border-left-color:var(--rojo);background:var(--rojo-suave)}

/* Falta la entrada: la ficha se pone roja del todo con el texto en blanco. Es
   lo unico que RRHH puede resolver en caliente, asi que tiene que verse desde
   la puerta. Solo cambia de color, sin movimiento, para que siga parpadeando
   con las animaciones reducidas de Windows activadas, que es como esta el
   equipo. */
@keyframes parpadeo-entrada{
  0%,100%{background:var(--rojo-suave);box-shadow:0 0 0 0 rgba(200,36,26,0)}
  50%{background:#c8241a;box-shadow:0 0 0 6px rgba(200,36,26,.45)}
}
@keyframes parpadeo-texto{
  0%,100%{color:var(--texto)}
  50%{color:#fff}
}
@keyframes parpadeo-texto-suave{
  0%,100%{color:var(--suave)}
  50%{color:#ffe3e0}
}
.persona.parpadea{animation:parpadeo-entrada 1.1s ease-in-out infinite;border-left-color:#c8241a}
.persona.parpadea h3{animation:parpadeo-texto 1.1s ease-in-out infinite}
.persona.parpadea .que-falta{animation:parpadeo-texto 1.1s ease-in-out infinite;font-weight:700}
.persona.parpadea .meta,.persona.parpadea .marcas{animation:parpadeo-texto-suave 1.1s ease-in-out infinite}
.p-ok{border-left-color:var(--verde)}
.p-espera,.p-sin{opacity:.72}

.etiqueta{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;
          text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;flex:none}
.et-ok{background:var(--verde-suave);color:var(--verde)}
.et-falta{background:var(--rojo);color:#fff}
.et-espera{background:var(--ambar-suave);color:var(--ambar)}
.et-sin{background:var(--borde);color:var(--suave)}

.cargando,.vacio{color:var(--suave);padding:18px 0}
.pie{color:var(--suave);font-size:12.5px;margin-top:30px;text-align:center}
.brindis{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:24px;
         background:var(--primario);color:#fff;padding:10px 18px;border-radius:999px;
         opacity:0;transition:.25s;pointer-events:none;z-index:20}
.brindis.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* Formularios de login, ajustes e instalacion */
.panel{max-width:560px;margin:40px auto;background:var(--tarjeta);border:1px solid var(--borde);
       border-radius:var(--radio);padding:26px}
.panel.ancho{max-width:1400px;width:calc(100% - 32px)}
.panel h1{margin:0 0 6px;font-size:20px}
.panel p.sub{color:var(--suave);margin:0 0 22px}
label{display:block;margin:14px 0 5px;font-weight:600;font-size:14px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],select{
  width:100%;padding:10px 12px;border:1px solid var(--borde);border-radius:8px;
  background:var(--fondo);color:var(--texto);font:inherit}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ayuda{color:var(--suave);font-size:12.5px;margin-top:4px}
.error{background:var(--rojo-suave);color:var(--rojo);padding:10px 14px;border-radius:8px;margin-bottom:14px}
.exito{background:var(--verde-suave);color:var(--verde);padding:10px 14px;border-radius:8px;margin-bottom:14px}
fieldset{border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin:20px 0}
legend{font-weight:700;padding:0 6px}
/* Filtros del historial: en una linea en pantalla ancha, apilados en el movil. */
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:16px 0}
.filtros label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--suave)}
.filtros input,.filtros select{padding:8px 10px;border:1px solid var(--borde);border-radius:8px;
  background:var(--tarjeta);color:var(--texto);font:inherit}
tr.fila-incidencia td{background:var(--rojo-suave)}

/* Quien aviso: la aplicacion lo hace sola, RRHH deja constancia aparte. */
.quien-aviso{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.marca-aviso{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.marca-aviso.auto{background:var(--verde-suave);color:var(--verde);border:1px solid var(--verde)}
.marca-aviso.mano{background:var(--ambar-suave);color:var(--ambar);border:1px solid var(--ambar)}
.marca-aviso.ninguno{background:transparent;color:var(--suave);border:1px solid var(--borde)}

table.datos{width:100%;border-collapse:collapse;font-size:14px}
table.datos th,table.datos td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borde)}
@media (max-width:560px){.fila{grid-template-columns:1fr}.aviso .acciones{margin-left:0;width:100%}}

/* Aviso de estado de la sincronizacion */
.salud{border-radius:var(--radio);padding:12px 16px;margin-bottom:18px;font-size:14.5px;line-height:1.5}
.salud.mal{background:var(--rojo-suave);color:var(--rojo);border:1px solid var(--rojo)}
.salud.regular{background:var(--ambar-suave);color:var(--ambar);border:1px solid var(--ambar)}
.salud a{color:inherit;font-weight:700}

/* Campo de contraseña con botón de ver */
.caja-clave{position:relative;display:block}
.caja-clave input{padding-right:44px !important;width:100%}
.ver-clave{position:absolute;top:50%;right:8px;transform:translateY(-50%);
           background:none;border:0;padding:4px;cursor:pointer;color:var(--texto);
           display:flex;align-items:center;border-radius:6px;line-height:0;opacity:.85}
.ver-clave:hover{opacity:1}
.ver-clave:focus-visible{outline:2px solid var(--acento);outline-offset:1px}

/* Aviso tranquilo: no pasa nada malo, solo que ahora no toca comprobar. */
.salud.aviso{background:rgba(148,163,184,.08);color:#94a3b8;border:1px solid #334155}

/* Marca discreta de "ya hay una contraseña puesta", junto a su etiqueta. */
.ok-guardada{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:rgba(34,197,94,.14);color:#4ade80;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;text-transform:lowercase;vertical-align:middle}

/* La pestaña en la que se está, resaltada en el menú. */
.boton.fantasma.activo{background:rgba(255,255,255,.16);color:#fff}


/* --------------------------------------------------- pestañas de empresa --
   El panel enseña las dos empresas juntas; estas pestañas sirven para mirar
   una sola. La pastilla lleva los fichajes que faltan en cada una, para que se
   vea desde «Todas» dónde está el problema. */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.pestana {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid #d7dde5;
  border-radius: 999px;
  background: #fff;
  color: #33415c;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pestana:hover { border-color: var(--primario, #0B2545); }
.pestana.activa {
  background: var(--primario, #0B2545);
  border-color: var(--primario, #0B2545);
  color: #fff;
}
.pestana .pastilla {
  background: #c8241a;
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}
.empresa-de {
  margin: 2px 0 6px;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #6b7a90;
}
.persona.p-falta .empresa-de { color: #a33; }


/* ------------------------------------------------------ fichas de empresa --
   Cada empresa es una cuenta distinta de DayControl; en Ajustes ocupa su
   propio recuadro para que no se mezclen los accesos de una con los de otra. */
.ficha-empresa {
  border: 1px solid var(--acento, #C9A24B);
  border-radius: 10px;
  padding: 12px 16px 16px;
  margin: 0 0 14px;
}
.ficha-empresa > legend {
  padding: 0 8px;
  font-weight: 700;
  /* Sobre el fondo oscuro, el azul de la casa no se leia: va en dorado. */
  color: var(--acento, #C9A24B);
}
.ficha-empresa details { margin-top: 8px; }
.ficha-empresa details summary { cursor: pointer; }
label.en-linea {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.acciones-empresa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 18px;
}
.acciones-empresa label { margin: 0; }


/* Botón de avisar por GP Chat: es la acción principal de una ficha con falta,
   así que se ve como tal y no como un enlace más. */
.boton.chat {
  background: #0f7b6c;
  border-color: #0f7b6c;
  color: #fff;
}
.boton.chat:hover { background: #0c655a; }
.boton.chat[disabled] { opacity: .6; }
.acciones-persona { margin-top: 10px; }


/* Cuadro de baja o vacaciones. Es un <dialog> del navegador: se abre encima
   del panel y no depende de que la ficha siga pintada debajo. */
.cuadro {
  border: 0;
  border-radius: 14px;
  padding: 22px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.cuadro::backdrop { background: rgba(11, 37, 69, .45); }
.cuadro h2 { margin: 0 0 6px; font-size: 1.15rem; }
.cuadro .sub { margin: 0 0 16px; }
.cuadro .quien { font-weight: 600; }
.formulario-ausencia label { display: block; margin: 0 0 12px; font-size: .9rem; }
.formulario-ausencia input, .formulario-ausencia select { width: 100%; }
.formulario-ausencia .dos { display: flex; gap: 12px; }
.formulario-ausencia .dos label { flex: 1; }
.formulario-ausencia .acciones { display: flex; gap: 8px; margin-top: 6px; }

/* Ausencias en Plantilla: lo puesto se ve de un vistazo y se quita marcando
   la casilla, que es como se quita todo lo demás en esta pantalla. */
.ausencia-puesta { display: block; font-size: .85rem; margin-bottom: 4px; }
.ausencia-puesta input { margin-right: 4px; }