:root {
  --navy: #1b3a6b;
  --navy-dark: #142c52;
  --blue-accent: #2b57a0;
  --bg: #f4f6fb;
  --card-bg: #ffffff;
  --border: #d9e0ec;
  --text: #1f2937;
  --muted: #6b7280;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
}

* {
  box-sizing: border-box;
}

.legal-warning {
  display: block;
  width: 100%;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 20px;
}

/* Dentro de la tarjeta de login, el aviso ocupa el propio borde superior de
   la tarjeta (pegado, redondeado igual que sus esquinas) en vez de flotar
   como una caja aparte con margen alrededor. */
.login-card .legal-warning {
  /* width:auto es imprescindible aquí: con width:100% fijo, al tener
     margin-left Y margin-right negativos a la vez la caja queda
     sobre-restringida y el navegador ignora el margen derecho (CSS 10.3.3),
     dejando la esquina derecha sin recortar. */
  width: auto;
  margin: -37px -33px 20px;
  border: none;
  border-bottom: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 16px 16px 0 0;
}

.legal-warning .warning-line + .warning-line {
  margin-top: 2px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Login: layout fijo sin scroll de página (pedido explícito) — el resto de
   páginas (dashboard) sigue siendo alto natural con scroll normal, así que
   esto va sobre una clase propia del body del login, no sobre `body` a
   secas. overflow-y:auto en login-wrap es la red de seguridad: si algún día
   el contenido no cupiera en una pantalla muy baja, se desplaza solo esa
   sección en vez de recortarse en silencio. */
body.login-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

header.portal-header {
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  padding: 14px 24px;
  min-width: 0;
}

header.portal-header img {
  height: 64px;
  width: auto;
  display: block;
}

header.portal-header .titles {
  flex: 1 1 160px;
}

header.portal-header .titles h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.portal-header .titles p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.portal-header .spacer {
  flex: 1;
}

header.portal-header button.logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: auto;
}

header.portal-header button.logout:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Fila a pantalla completa (alto exacto heredado del body.login-page de
   arriba, sin scroll): la foto ocupa su mitad a sangre (sin padding propio,
   sin bordes redondeados, sin sombra — pedido explícito: "no debe parecer
   una tarjeta"), y solo la mitad de la tarjeta de login tiene el padding
   que la centra. */
main.login-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* La foto solo entra en juego cuando hay sitio de sobra para las dos
   columnas (pedido explícito: "que tmb sea responsive... se va a utilizar
   en movil") — por debajo de eso, mismo login centrado de siempre. */
.login-hero {
  display: none;
}

.login-card-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

@media (min-width: 860px) {
  .login-hero {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }

  .login-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La foto tiene mucho techo/arquitectura vacía arriba y a los chavales
       más abajo — sesgamos el recorte hacia abajo para que se vean ellos,
       no el hueco de encima (pedido explícito). Sin zoom/transform: con
       object-fit:cover solo (sin escalar), a distintos anchos de pantalla el
       recorte varía menos y las caras no se cortan. */
    object-position: center 58%;
    display: block;
  }

  /* Efecto "blanqueado" pedido explícito: capa blanca semitransparente
     encima de la foto para suavizarla, en vez de mostrarla a toda
     saturación. */
  .login-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
  }

  .login-card-wrap {
    flex: 1 1 0;
  }
}

.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  /* Resplandor azul ambiente alrededor de toda la tarjeta ("eso azulito de
     detrás") + una sombra dirigida hacia abajo para dar sensación de
     profundidad — el resplandor solo (0 0 Xpx) queda plano, y la sombra
     dirigida sola no rodea el modal por los cuatro lados. */
  box-shadow:
    0 0 50px rgba(27, 58, 107, 0.28),
    0 20px 45px -15px rgba(27, 58, 107, 0.45);
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  flex-shrink: 0;
  overflow: hidden;
}

.login-card h2 {
  margin: 0 0 22px;
  font-size: 1.4rem;
  color: var(--navy-dark);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  background: none;
  padding: 0;
  line-height: 1;
}

.info-icon:hover,
.info-icon[aria-expanded="true"] {
  border-color: var(--blue-accent);
  color: var(--blue-accent);
}

.info-popover {
  display: none;
  background: #eef2fb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.5;
  margin: -10px 0 18px;
}

.info-popover.visible {
  display: block;
}

.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
}

.field input:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(43, 87, 160, 0.15);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 62px;
}

.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--blue-accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
}

.password-toggle-btn:hover {
  text-decoration: underline;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -6px 0 16px;
}

.remember-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}

.remember-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue-accent);
  cursor: pointer;
}

.link-btn {
  background: none;
  border: none;
  color: var(--blue-accent);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.link-btn:hover {
  text-decoration: underline;
}

#helpAccessPopover {
  margin-top: -10px;
}

button.primary {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

button.primary:hover {
  background: var(--navy-dark);
}

button.primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.help-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.upload-notice {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #92400e;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0 0 16px;
}

.error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-bottom: 16px;
  display: none;
}

.error-box.visible {
  display: block;
}

.site-footer {
  position: relative;
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  padding: 16px 24px 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 100%;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 40% 100%, 0 100%);
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a {
  color: var(--blue-accent);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  text-decoration: underline;
}

main.dashboard-wrap {
  max-width: 720px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.greeting {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.greeting strong {
  color: var(--navy-dark);
}

.subtext {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.course-title {
  font-size: 1.05rem;
  color: var(--navy-dark);
  margin: 28px 0 12px;
}

.course-title:first-of-type {
  margin-top: 4px;
}

.module-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

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

.module-head .name {
  font-weight: 700;
  color: var(--navy-dark);
  flex: 1 1 auto;
  min-width: 140px;
}

.module-head .total-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.module-head .total {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.module-card .info-popover {
  margin: -4px 0 14px;
}

.track {
  height: 10px;
  background: #eef1f7;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.margin-line {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
}

.margin-line .label {
  color: var(--muted);
}

.motivation {
  background: #eef2fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--navy-dark);
  font-weight: 600;
  margin-bottom: 20px;
}

/* Distinto del resto de cajas informativas (motivation, module-card...),
   que son todas el mismo azul grisáceo pálido — pedido explícito de darle
   otro color para que destaque como lo que es, un aviso/CTA, y no se
   confunda con el resto de bloques. */
.tutorial-video-banner {
  display: block;
  background: var(--blue-accent);
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  margin-bottom: 16px;
}

.tutorial-video-banner:hover {
  background: var(--navy-dark);
}

.inc-table-wrap {
  overflow-x: auto;
}

/* La tabla siempre se muestra como tarjetas apiladas (ver más abajo, cerca
   de .inc-table td::before) -- por eso aquí solo queda el estilo base del
   texto de cada celda, nada de anchos de columna ni estilos de thead (no
   se llega a pintar, thead está siempre oculto). */
.inc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  font-size: 0.85rem;
}

.inc-table td {
  text-align: left;
  overflow-wrap: break-word;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 60px 20px;
}

.loading {
  text-align: center;
  color: var(--muted);
  padding: 60px 20px;
}

.just-upload-btn {
  background: var(--blue-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.just-upload-btn:hover {
  background: var(--navy-dark);
}

.just-link-btn {
  background: none;
  border: none;
  color: var(--blue-accent);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 0;
  text-decoration: underline;
}

.porque-just-wrap {
  margin-top: 6px;
}

.just-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.just-badge-pendiente {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warning);
}

.just-badge-rechazada {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.just-badge-vencido {
  background: rgba(107, 114, 128, 0.12);
  color: var(--muted);
}

.photo-editor {
  margin-top: 12px;
}

.photo-editor-stage {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
  touch-action: none;
}

.photo-editor-preview {
  display: block;
}

.crop-box {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(17, 24, 39, 0.6);
  border: 1.5px dashed #fff;
  cursor: move;
  touch-action: none;
}

.crop-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1.5px solid var(--blue-accent);
  border-radius: 50%;
  touch-action: none;
}

.crop-handle-tl {
  top: -9px;
  left: -9px;
  cursor: nwse-resize;
}

.crop-handle-tr {
  top: -9px;
  right: -9px;
  cursor: nesw-resize;
}

.crop-handle-bl {
  bottom: -9px;
  left: -9px;
  cursor: nesw-resize;
}

.crop-handle-br {
  bottom: -9px;
  right: -9px;
  cursor: nwse-resize;
}

.photo-editor-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.photo-editor-btn {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.photo-editor-btn:hover {
  background: #f4f6fb;
}

.photo-editor-hint {
  margin: 8px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 44, 82, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.modal-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-card h3 {
  margin: 0 0 4px;
  color: var(--navy-dark);
  font-size: 1.1rem;
}

.modal-sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

.modal-card .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.modal-card .field input[type="file"] {
  width: 100%;
  font-size: 0.85rem;
}

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

.modal-actions button {
  flex: 1;
}

button.secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

button.secondary:hover {
  background: #f4f6fb;
}

@media (max-width: 480px) {
  header.portal-header {
    padding: 12px 16px;
  }

  header.portal-header img {
    height: 46px;
  }

  header.portal-header .titles h1 {
    font-size: 1.05rem;
  }

  header.portal-header .titles p {
    font-size: 0.78rem;
  }
}

/* La tabla de "Días con falta" con 4 columnas de ancho fijo no tiene sitio
   para respirar en ningún tamaño: main.dashboard-wrap tiene max-width:720px
   SIEMPRE (ver arriba), así que ni en un ordenador grande el modo de 4
   columnas llega a tener más ancho real que eso -- el horario (dos líneas
   de texto) y el motivo (etiqueta + pastilla) se solapan igual en cualquier
   pantalla (visto en pantalla real, no solo en móvil estrecho). Por eso las
   tarjetas apiladas van sin condición de media query, no solo por debajo de
   un ancho concreto: cada fila es una tarjeta con sus campos apilados, cada
   uno con su etiqueta (Día/Módulo/Horario/Por qué) encima. */
.inc-table-wrap {
  overflow-x: visible;
  border: none;
}

.inc-table,
.inc-table thead,
.inc-table tbody,
.inc-table tr {
  display: block;
  width: auto !important;
}

.inc-table thead {
  display: none;
}

.inc-table tbody tr {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 14px;
  margin-bottom: 10px;
}

.inc-table tbody tr:last-child {
  margin-bottom: 0;
}

/* Etiqueta y valor en la misma línea (columna de etiqueta de ancho fijo),
   no apilados -- pedido explícito: apilar dejaba demasiado aire para campos
   cortos como Día/Módulo. Si el valor es largo (horario con varios tramos,
   el motivo con su pastilla) simplemente baja de línea dentro de su propia
   columna, la etiqueta se queda arriba a la izquierda. */
.inc-table td {
  display: flex;
  width: auto !important;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  white-space: normal;
  overflow-wrap: break-word;
}

.inc-table tr td:last-child {
  border-bottom: none;
}

/* Único hijo "real" del <td> (ver dashboard.js) -- todo lo que antes eran
   varios elementos sueltos directamente en el <td> va ahora dentro de esto,
   para que se apilen entre sí (bloque normal) en vez de colocarse cada uno
   como una columna más de la fila flex de arriba. */
.td-value {
  flex: 1 1 auto;
  min-width: 0;
}

.inc-table td::before {
  content: attr(data-label);
  flex: 0 0 64px;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
/* Compact screens: readable inputs without browser zoom and comfortable tap targets. */
@media (max-width: 680px), (pointer: coarse) {
  .field input, .modal-card .field textarea { font-size: 16px; }
  button, .remember-check, .footer-links a { min-height: 44px; }
  .remember-check, .footer-links a { display: inline-flex; align-items: center; }
  .info-icon { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border: 0; }
  .info-icon::before { content: ""; position: absolute; inset: 13px; border: 1.5px solid currentColor; border-radius: 50%; pointer-events: none; }
  .module-head .name { min-width: 0; overflow-wrap: anywhere; }
  .modal-card { max-height: calc(100dvh - 32px); }
}