* {
  box-sizing: border-box;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  background: #f4f5f7;
  color: #1f2430;
}

.container {
  max-width: 1400px;
  width: min(100%, 1400px);
  margin: 0 auto;
  padding: 32px 24px 80px;
  position: relative;
}

.page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  min-height: 48px;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dbe0e6;
  flex-wrap: wrap;
}

/* El botón de cerrar sesión vive dentro de la barra de navegación, alineado
   a la derecha. Hay que neutralizar los estilos globales de <form> (tarjeta
   blanca con sombra y padding) para que no dibuje una caja alrededor. */
.nav-logout {
  display: flex;
  align-items: center;
  margin: 0 0 6px auto;
  padding: 0;
  gap: 0;
  width: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.nav-logout button {
  min-width: 0;
  width: auto;
  padding: 8px 14px;
  font-size: 0.9rem;
}

/* Un <form> dentro de una tabla, de una fila de archivos o de la barra de
   acciones de un modal es solo el envoltorio de un botón, no un formulario
   de verdad: no debe pintar la tarjeta blanca con sombra. */
td form,
.file-row form,
.modal-actions form {
  display: inline;
  margin: 0;
  padding: 0;
  gap: 0;
  width: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Logo de la empresa, a la izquierda del todo en la barra de navegación. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px 6px 0;
  margin-right: 8px;
  border-right: 1px solid #dbe0e6;
  margin-bottom: 4px;
}

.nav-logo img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Logo en la pantalla pública de firma, encima del título. */
.sign-brand {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dbe0e6;
}

.sign-brand img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* Miniatura del logo en la tabla de empresas de Administración. */
.logo-thumb {
  display: block;
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.logo-thumb-empty {
  color: #9aa1ad;
  font-size: 0.8rem;
  font-style: italic;
  height: auto;
}

.top-nav-link {
  display: inline-block;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #4b5563;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.top-nav-link:hover {
  color: #1f2430;
}

.top-nav-link.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}

.file-row .file-info {
  display: flex;
  flex-direction: column;
}

.file-row .file-info small {
  margin-top: 2px;
}

button.button-red {
  background: #c92a2a;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}

button.button-red:hover {
  background: #a21f1f;
}

#shutdown-status {
  margin-top: 8px;
  color: #b00;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

h2 {
  font-size: 1.1rem;
  margin-top: 28px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: none;
  align-items: stretch;
}

label {
  font-weight: 700;
  font-size: 0.95rem;
}

/* La etiqueta siempre encima de su campo. Sin esto, los campos estrechos
   (como el selector de mes) se colocaban al lado de su etiqueta y rompían
   la alineación con el resto del formulario. */
form label {
  display: block;
  margin-bottom: 6px;
}

/* Formulario a dos columnas en pantallas anchas: los campos cortos no
   tienen por qué ocupar una fila entera cada uno. Con .field-wide se marca
   el que sí debe ocupar el ancho completo. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  align-items: start;
  width: 100%;
}

.form-grid > .field-wide {
  grid-column: 1 / -1;
}

/* Frase que recuerda, dentro del formulario, qué tipo se va a enviar: el
   dato ya no se pide, lo fija la pestaña. */
.form-intro {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* Campo de archivo: el botón nativo desentona con el resto, y se puede
   dar estilo sin JavaScript ni envoltorios. */
input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: #eef2ff;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: #dbeafe;
}

/* --- Selector de mes propio -------------------------------------------- */
/* El panel del navegador no se puede estilar desde la página, así que se
   sustituye por uno nuestro. El campo imita al resto de campos del
   formulario para que no se note el cambio. */

.month-picker {
  position: relative;
  width: 100%;
}

.month-picker-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #ccd0d8;
  border-radius: 12px;
  background: #f9fafb;
  color: #1f2430;
  font-size: 1.05rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.month-picker-field:hover {
  border-color: #b9c0cc;
}

.month-picker-field:focus-visible,
.month-picker-field[aria-expanded="true"] {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.month-picker-field .icon {
  flex: 0 0 auto;
  color: #6b7280;
}

.month-picker-field .is-placeholder {
  color: #9aa1ad;
}

.month-picker-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  width: min(300px, 100%);
  padding: 12px;
  border: 1px solid #e5e9ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
}

.month-picker-panel[hidden] {
  display: none;
}

.month-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.month-picker-year {
  font-weight: 700;
  font-size: 1rem;
}

.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mp-mes {
  min-width: 0;
  padding: 10px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f1f5f9;
  color: #1f2430;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-mes:hover {
  background: #dbeafe;
}

/* El mes en curso se marca con un borde; el elegido, en azul relleno. */
.mp-mes.is-today {
  border-color: #bfd3fb;
}

.mp-mes.selected,
.mp-mes.selected:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.month-picker-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.month-picker-foot button {
  min-width: 0;
  padding: 7px 12px;
  font-size: 0.85rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="month"],
select {
  padding: 14px 16px;
  border: 1px solid #ccd0d8;
  border-radius: 12px;
  font-size: 1.05rem;
  width: 100%;
}

form > div {
  width: 100%;
  display: block;
}

form > div > label,
form > div > input,
form > div > select,
form > div > div {
  width: 100%;
}


select {
  min-height: 56px;
  appearance: none;
  background-color: #f9fafb;
  background-image: linear-gradient(45deg, transparent 50%, #1f2430 50%), linear-gradient(135deg, #1f2430 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1.25em + 2px), calc(100% - 12px) calc(1.25em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (max-width: 800px) {
  .container {
    padding: 18px 14px 32px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  h1 {
    font-size: 1.35rem;
  }

  h2 {
    font-size: 1rem;
  }

  .pdf-frame,
  .pdf-pages {
    max-height: 55vh;
    height: auto;
  }

  .signature-pad {
    height: 220px;
  }

  .actions {
    flex-direction: column;
    gap: 12px;
  }

  button,
  input[type="text"],
  input[type="email"],
  input[type="file"],
  input[type="month"],
  select {
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .container {
    padding: 14px 12px 24px;
  }

  .pdf-frame,
  .pdf-pages {
    max-height: 52vh;
    height: auto;
  }

  .signature-pad {
    height: 180px;
  }

  button,
  input[type="text"],
  input[type="email"],
  input[type="file"],
  input[type="month"],
  select {
    width: 100%;
  }
}

small {
  color: #6b7280;
  display: block;
  margin-top: -8px;
}

/* Improve spacing for name + email in document lists */
.tab-content td small,
table td small {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Tunnel status spacing (make the help text separate from the URL input) */
#tunnel-status {
  display: block;
  margin-top: 8px;
  color: #6b7280;
  font-size: 0.9rem;
}

button {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 120px;
}

button#clear {
  background: #6b7280;
}

/* Un botón deshabilitado tiene que parecerlo: si no, se pulsa una y otra
   vez sin entender por qué no pasa nada. */
button:disabled,
button:disabled:hover {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Documento a firmar: las páginas se muestran como imágenes dentro de una
   caja con desplazamiento propio. Un <iframe> con el PDF no vale, porque en
   el móvil solo pinta la primera página y no deja hacer scroll. */
.pdf-pages {
  width: 100%;
  max-height: 65vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #ccd0d8;
  border-radius: 8px;
  background: #eef1f5;
}

.pdf-page {
  margin: 0 0 12px;
}

.pdf-page:last-child {
  margin-bottom: 0;
}

.pdf-page img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
}

.pdf-page figcaption {
  margin-top: 6px;
  color: #6b7280;
  font-size: 0.8rem;
  text-align: center;
}

.pdf-hint {
  margin-top: 10px;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Se conserva por si alguna pantalla antigua sigue usando el visor embebido. */
.pdf-frame {
  width: 100%;
  height: 65vh;
  border: 1px solid #ccd0d8;
  border-radius: 8px;
  margin-top: 12px;
  background: #fff;
}

.signature-pad {
  width: 100%;
  height: 200px;
  border: 2px dashed #9aa1ad;
  border-radius: 8px;
  background: #fff;
  touch-action: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 0.85rem;
}

/* --- Botones de icono en las filas de las tablas ------------------------ */

.row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  text-decoration: none;
}

.icon-btn:hover {
  background: #eef2ff;
  color: #2563eb;
}

.icon-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.icon-btn-danger:hover {
  background: #fee2e2;
  color: #c92a2a;
}

.icon-btn:disabled,
.icon-btn:disabled:hover {
  background: transparent;
  color: #cbd5e1;
  cursor: not-allowed;
}

/* --- Paginación y buscador --------------------------------------------- */

.table-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* "(opcional)" junto a la etiqueta de un campo que no es obligatorio. */
.label-optional {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.85rem;
}

/* Botón principal con icono a la izquierda ("Nuevo empleado"). */
.button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 16px;
  font-size: 0.92rem;
  width: auto;
  flex: 0 0 auto;
}

.table-search {
  flex: 1 1 240px;
  max-width: 320px;
  padding: 9px 14px;
  border: 1px solid #ccd0d8;
  border-radius: 10px;
  font-size: 0.95rem;
  width: auto;
}

.table-count {
  color: #6b7280;
  font-size: 0.85rem;
  margin-left: auto;
}

.table-empty {
  margin: 12px 0 0;
  padding: 18px;
  border: 1px dashed #ccd0d8;
  border-radius: 10px;
  color: #6b7280;
  background: #fff;
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.pager-btn {
  min-width: 0;
  padding: 7px 14px;
  font-size: 0.85rem;
  background: #eef2ff;
  color: #1f2937;
  border: 1px solid #dbeafe;
}

.pager-btn:hover:not(:disabled) {
  background: #dbeafe;
}

.pager-btn:disabled,
.pager-btn:disabled:hover {
  background: #f1f5f9;
  color: #b6bec9;
  border-color: #e5e7eb;
}

.pager-pages {
  color: #6b7280;
  font-size: 0.85rem;
}

/* En pantallas estrechas las tablas no caben. Que se desplacen dentro de su
   propia caja en vez de empujar la página entera hacia los lados. */
@media (max-width: 800px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th, td {
    white-space: nowrap;
  }

  /* El nombre y el email del firmante sí pueden partirse: si no, esa
     columna sola se lleva medio scroll. */
  td small {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .table-search {
    max-width: none;
  }

  .table-count {
    margin-left: 0;
  }

  .pager-btn {
    width: auto;
  }
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.pending { background: #fef3c7; color: #92400e; }
.badge.signed { background: #d1fae5; color: #065f46; }

/* Spinner overlay while processing signature */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.overlay .panel {
  background: #fff;
  padding: 20px 24px;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #e6edf8;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay .message { font-weight: 600; color: #111827; }

/* Tabs for monthly grouping */
.tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}
.tab-btn {
  background: #eef2ff;
  border: 1px solid #dbeafe;
  color: #1f2937;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #1e40af;
}
.tab-content table { margin-top: 8px; }

/* Segundo nivel de pestañas: las carpetas dentro de un mes. Mismo aspecto
   que las de los meses, un punto más pequeñas para que se lea la jerarquía. */
.subtabs {
  margin: 16px 0 14px;
}

.tab-btn.subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 14px;
  font-size: 0.88rem;
}

.subtab-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.1);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.tab-btn.subtab-btn.active .subtab-count {
  background: rgba(255, 255, 255, 0.28);
}

/* Descarga de una sola carpeta: acompaña al zip del mes, así que va en
   versión ligera para que no compitan dos botones sólidos seguidos. */
.button-outline {
  background: #fff;
  color: #2563eb;
  border: 1px solid #bfd3fb;
}

.button-outline:hover {
  background: #eef2ff;
}

/* Aviso bajo el desplegable de empleados: cuántos quedan fuera por tener
   ya la nómina del mes elegido. */
.field-note {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: #4b5563;
}

.field-note-warning {
  color: #92400e;
  font-weight: 600;
}

/* --- Explorador de Archivos: árbol a la izquierda, contenido a la derecha - */

.explorer {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.explorer-tree {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1f2430;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.tree-row:hover {
  background: #f1f5f9;
}

.tree-row.active {
  background: #eef2ff;
  color: #2563eb;
  font-weight: 700;
}

.tree-row .icon {
  flex: 0 0 auto;
  color: #94a3b8;
}

.tree-row.active .icon {
  color: #2563eb;
}

.tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-count {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
}

.tree-row.active .tree-count {
  background: #dbeafe;
  color: #1d4ed8;
}

.tree-caret {
  flex: 0 0 10px;
  color: #94a3b8;
  font-size: 0.7rem;
}

.tree-year {
  font-weight: 700;
}

.tree-year-block + .tree-year-block {
  margin-top: 4px;
}

.tree-children {
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px solid #e9edf2;
}

.explorer-main {
  min-width: 0;
}

.explorer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.breadcrumb {
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 600;
}

.breadcrumb .sep {
  color: #cbd5e1;
  margin: 0 2px;
}

.breadcrumb-link {
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: #2563eb;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Subcarpetas de un mes, como los iconos de carpeta de un explorador. */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.folder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #e5e9ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
}

.folder-card:hover {
  border-color: #bfd3fb;
  background: #f8faff;
}

.folder-card .icon {
  width: 30px;
  height: 30px;
  color: #2563eb;
  margin-bottom: 6px;
}

.folder-card-name {
  color: #1f2430;
  font-size: 1rem;
  font-weight: 700;
}

.folder-card-count {
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 500;
}

@media (max-width: 800px) {
  .explorer {
    grid-template-columns: minmax(0, 1fr);
  }

  .explorer-tree {
    position: static;
    max-height: 320px;
  }
}

.empty-folder {
  margin: 4px 0 8px;
  padding: 18px;
  border: 1px dashed #ccd0d8;
  border-radius: 10px;
  color: #6b7280;
  background: #fff;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
}

.modal-card {
  width: min(420px, calc(100% - 32px));
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* Icono redondo de los avisos ("envío realizado"). */
.modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 50%;
}

.modal-icon .icon {
  width: 28px;
  height: 28px;
}

.modal-icon.is-ok {
  background: #d1fae5;
  color: #059669;
}

.modal-icon.is-warning {
  background: #fef3c7;
  color: #b45309;
}

.modal-spinner {
  width: 42px;
  height: 42px;
  border: 5px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.modal-actions {
  display: flex;
  justify-content: center;
}

.modal-card h2 {
  margin: 0;
  font-size: 1.2rem;
}

.modal-card p {
  margin: 0;
  color: #1f2937;
  line-height: 1.5;
}

/* Un formulario dentro de un modal no debe pintar OTRA tarjeta blanca con
   sombra encima de la del modal. Y aunque el título vaya centrado, las
   etiquetas y los campos se leen mucho mejor alineados a la izquierda. */
.modal-card form {
  margin: 0;
  padding: 0;
  gap: 14px;
  width: 100%;
  background: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.modal-card label {
  display: block;
  margin-bottom: 6px;
}

.modal-card .modal-actions {
  margin-top: 4px;
}

/* Botón secundario de verdad: hasta ahora .button-secondary no tenía
   estilos propios y salía azul, igual que el principal, así que en un modal
   "Cancelar" y "Guardar" eran indistinguibles. */
.button-secondary {
  background: #eef2ff;
  color: #1f2937;
  border: 1px solid #dbeafe;
}

.button-secondary:hover {
  background: #dbeafe;
}


/* ---------------------------------------------------------------------------
   Verificación de identidad y consentimiento en la página de firma.

   El firmante ve dos pasos: primero acredita quién es con un código de un
   solo uso, y solo entonces se le habilita el pad y la casilla de
   conformidad. Visualmente el bloque de verificación tiene que destacar
   sobre el documento, que es largo y ocupa toda la pantalla.
   --------------------------------------------------------------------------- */

.verify-box {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #d7dbe2;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  background: #f8fafc;
}

.verify-box h2 {
  margin-top: 0;
}

.verify-actions {
  margin-top: 14px;
}

.verify-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.verify-input-row label {
  width: 100%;
  margin: 0;
  font-weight: 600;
}

.verify-input-row input {
  flex: 0 1 180px;
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.verify-status {
  margin: 12px 0 0;
  min-height: 20px;
  color: #4b5563;
  font-size: 14px;
}

.verify-status.is-error {
  color: #c92a2a;
  font-weight: 600;
}

.verify-error {
  color: #c92a2a;
  font-weight: 600;
}

/* Casilla de conformidad: el texto es largo a propósito (es el que queda
   registrado como consentimiento), así que va al lado de la casilla y no
   debajo, y toda la fila es clicable. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 6px;
  padding: 14px;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  cursor: pointer;
}

/* Ayudas y avisos en los formularios de gestión. */
.field-hint {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}

.sin-movil {
  color: #b45309;
  font-weight: 600;
  white-space: nowrap;
}

/* Aviso dentro del modal de confirmación de envío: el documento ha salido,
   pero hay algo que conviene arreglar (por ejemplo, un empleado sin móvil
   en un documento que se certifica por SMS). */
.modal-warning {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid #b45309;
  border-radius: 6px;
  background: #fffbeb;
  color: #7c2d12;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.modal-warning a {
  color: #7c2d12;
  font-weight: 600;
}

/* --- Vacaciones ---------------------------------------------------------
   Rejilla del mes a la izquierda y tabla de saldos a la derecha. En móvil
   se apilan: el calendario primero, que es lo que se viene a mirar. */

/* Esta pantalla aprovecha más ancho que el resto: el calendario es lo que
   se viene a mirar y con el ancho general de 1400px las casillas quedaban
   estrechas, con los nombres cortados a la mitad. */
.container.container-ancho {
  max-width: 1800px;
  width: min(100%, 1800px);
}

.vacaciones-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  /* start, no stretch: en un grid la tarjeta más alta manda sobre la fila,
     así que con stretch una plantilla larga estiraba el CALENDARIO para
     igualar la lista, justo al revés de lo que queremos. El alto de la
     tarjeta de saldos lo iguala al del calendario un poco de JS (ver
     ajustarAltoSaldos en vacaciones.html), que es lo único que sabe cuánto
     mide el calendario una vez pintado. */
  align-items: start;
  margin: 14px 0 24px;
}

@media (max-width: 900px) {
  .vacaciones-layout { grid-template-columns: 1fr; }
}

.calendario,
.saldos {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
}

.saldos {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.saldos h2 {
  margin: 2px 0 10px;
  font-size: 15px;
  flex: none;
}

/* Solo la lista se desplaza; el título se queda fijo arriba. */
.saldos-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.saldos-lista table.tabla-saldos th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

table.calendario-mes {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
}

table.calendario-mes th {
  padding: 6px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  background: none;
  border: 0;
  text-align: center;
}

td.cal-dia {
  /* Alto MÍNIMO de cada casilla: en una tabla, height se comporta como un
     mínimo, así que si un día coinciden más personas de las que caben la
     fila crece y se ven todas. Antes había un overflow:hidden que las
     recortaba en silencio, y un día con seis de vacaciones enseñaba tres
     sin avisar de que faltaban. Da para cuatro sin crecer; con el alto
     anterior (78px) cabían dos. */
  height: 118px;
  vertical-align: top;
  border: 1px solid #eef2f7;
  padding: 5px;
}

td.cal-dia.finde { background: #f8fafc; }
td.cal-dia.fuera { background: #fbfcfd; }
td.cal-dia.hoy { box-shadow: inset 0 0 0 2px #2563eb; }

.cal-num {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

td.cal-dia.hoy .cal-num { color: #2563eb; }

.cal-chip {
  display: block;
  width: 100%;
  /* Los botones de la plataforma llevan un min-width general para que no
     salgan enanos. Aquí estorba: en pantallas estrechas la casilla mide unos
     50px y el chip se salía a 120, pisando los del día de al lado y robándoles
     el clic. */
  min-width: 0;
  max-width: 100%;
  text-align: left;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 5px;
  padding: 2px 6px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-chip:hover,
.cal-chip:focus-visible {
  filter: brightness(1.12);
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, .55);
}

table.tabla-saldos { margin: 0; font-size: 13.5px; }
table.tabla-saldos th:not(:first-child),
table.tabla-saldos td:not(:first-child) { text-align: right; width: 58px; }

.punto-color {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.sin-alta { color: #92400e; }
.caduca { color: #92400e; }

.mes-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mes-actual {
  min-width: 150px;
  text-align: center;
  font-size: 15px;
}

.aviso-error {
  color: #c92a2a;
  font-weight: 600;
}

.aviso-ok {
  background: #d1fae5;
  color: #065f46;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.aviso-alta {
  background: #fef3c7;
  color: #92400e;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.field-hint {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

.field-hint.aviso-error { color: #c92a2a; }

/* La regla general de móvil convierte las tablas en bloques con scroll, pero
   el calendario tiene que seguir siendo una rejilla de 7 columnas: si se
   desborda no se entiende nada. Se queda como tabla y se le baja el alto. */
@media (max-width: 800px) {
  table.calendario-mes { display: table; }
  table.calendario-mes th,
  table.calendario-mes td { white-space: normal; }
  td.cal-dia { height: 62px; }
  /* Apiladas no hay nada que igualar: la lista se muestra entera. */
  .saldos-lista { overflow-y: visible; max-height: none; }
  .cal-chip { font-size: 9px; }
  .mes-actual { min-width: 120px; }
}

/* Empleado deshabilitado: se sigue viendo (su historial importa) pero
   apagado, para que se distinga de un vistazo de los que están en activo. */
.badge.inactivo { background: #e5e7eb; color: #4b5563; }

tr.fila-inactiva td { color: #9ca3af; }
tr.fila-inactiva td:first-child { font-style: italic; }
tr.fila-inactiva .badge.inactivo { color: #4b5563; }