:root {
    --bg: #0a0c12; --surface: #12151f; --surface2: #171b28; --border: #242a3b;
    --text: #eef0f6; --text-muted: #8b90a8; --accent: #0f9488; --accent-hover: #0c7d72; --accent-2: #14b8a6;
    --ok: #3ecf8e; --warn: #f5a623; --danger: #e5484d; --mural-accent: #22b8cf;
    --header-bg-1: rgba(10,12,18,0.92); --header-bg-2: rgba(10,12,18,0.82);
    --overlay-bg: rgba(0,0,0,0.55); --nav-bg: #0d1019; --nav-inactive: #8b90a8;
    --font-display: 'Unbounded', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  }
  /* Tema claro: solo afecta la app ya logueada -- las pantallas de login
     quedan siempre oscuras (usan colores fijos, no estas variables) porque
     tienen la foto del edificio de fondo. Se diseño en serio, no es el
     oscuro invertido: superficies blancas propias, no un filtro. */
  body.tema-claro {
    --bg: #f4f5fa; --surface: #ffffff; --surface2: #edeff7; --border: #dfe2ee;
    --text: #14161f; --text-muted: #6b7086;
    --header-bg-1: rgba(255,255,255,0.92); --header-bg-2: rgba(255,255,255,0.82);
    --overlay-bg: rgba(20,22,31,0.35); --nav-bg: #ffffff; --nav-inactive: #6b7086;
    --warn: #a86800; --mural-accent: #0d8a9e;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh; font-variant-numeric: tabular-nums;
    transition: background 0.2s, color 0.2s;
  }

  #login-screen, #cambiar-password-screen {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    position: relative; overflow: hidden;
    background-image:
      linear-gradient(180deg, rgba(10,12,18,0.12) 0%, rgba(10,12,18,0.55) 65%, #0a0c12 100%),
      linear-gradient(90deg, rgba(10,12,18,0.28), rgba(10,12,18,0.05)),
      url('/panel/edificio-hero.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, center 35%;
    padding: 20px;
  }
  .login-box {
    background: linear-gradient(165deg, rgba(23,27,44,0.78), rgba(18,21,31,0.78));
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px; padding: 36px 28px; width: 100%; max-width: 340px; text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .login-logo { height: 52px; width: auto; margin-bottom: 16px; opacity: 0.95; }
  .login-box h2 { font-family: var(--font-display); margin: 0 0 4px; font-size: 17px; letter-spacing: 0.01em; font-weight: 700; }
  .login-box p { color: #8b90a8; font-size: 13px; margin: 0 0 24px; }
  .login-box input {
    width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,12,18,0.5); color: #eef0f6; font-size: 16px; text-align: center;
    margin-bottom: 10px; transition: border-color 0.15s;
  }
  .login-box input:focus { outline: none; border-color: rgba(255,255,255,0.18); }
  /* Chrome le mete su propio fondo blanco/amarillo a los campos con
     autocompletado, pisando el estilo oscuro del sitio -- este truco del
     box-shadow interno (en vez de background) es la unica forma de
     ganarle a esa regla sin usar !important sobre el color. */
  .login-box input:-webkit-autofill,
  .login-box input:-webkit-autofill:focus {
    -webkit-text-fill-color: #eef0f6;
    -webkit-box-shadow: 0 0 0px 1000px rgba(10,12,18,0.9) inset;
    caret-color: #eef0f6;
  }
  .login-box button {
    width: 100%; margin-top: 8px; padding: 13px; border-radius: 8px; border: none;
    background: #eef0f6; color: #0a0c12; font-weight: 700; cursor: pointer; font-size: 15px;
    transition: filter 0.15s, transform 0.15s; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }
  .login-box button:hover { filter: brightness(0.92); transform: translateY(-1px); }
  .login-error { color: #e5484d; font-size: 13px; margin-top: 10px; min-height: 16px; }
  .login-soporte {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
    font-size: 12px; color: rgba(238,240,246,0.4); text-decoration: none; transition: color 0.15s;
  }
  .login-soporte:hover { color: rgba(238,240,246,0.7); }
  .login-soporte svg { width: 13px; height: 13px; flex-shrink: 0; }

  header {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 10;
    background: linear-gradient(180deg, var(--header-bg-1), var(--header-bg-2));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .icon-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; padding: 0; position: relative;
  }
  .icon-btn svg { width: 18px; height: 18px; }
  .header-titulo { flex: 1; min-width: 0; }
  .header-titulo h1 { font-family: var(--font-display); font-size: 15px; margin: 0; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-titulo span { display: block; color: var(--text-muted); font-weight: 400; font-family: var(--font-body); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .avatar-btn {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    cursor: pointer;
  }
  .notif-dot {
    position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #ff5c5c; color: white; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none;
  }
  .notif-wrap { position: relative; margin-left: auto; }
  .notif-panel {
    position: absolute; top: 46px; right: 0; width: 210px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); z-index: 60;
  }
  .notif-panel { max-height: 340px; overflow-y: auto; }
  .notif-panel .notif-vacio { color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 10px 0; }
  .notif-item { display: block; padding: 10px 6px; border-radius: 8px; text-decoration: none; color: var(--text); }
  .notif-item + .notif-item { border-top: 1px solid var(--border); }
  .notif-item-titulo { font-weight: 700; font-size: 12.5px; }
  .notif-item.no-leida .notif-item-titulo::before { content: "●  "; color: var(--accent); }
  .notif-item-cuerpo { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .notif-item-fecha { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }

  main { max-width: 480px; margin: 0 auto; padding: 18px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }

  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; border-top: 1px solid var(--border); background: var(--nav-bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nav-item {
    flex: 1; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; position: relative; cursor: pointer; border: none; background: none; padding: 0; color: var(--nav-inactive);
  }
  .nav-item svg { width: 19px; height: 19px; }
  .nav-item span { font: 600 10.5px/1 Inter, sans-serif; }
  .nav-item.activo { color: var(--accent-2); }
  body.tema-claro .nav-item.activo { color: #5a4bd0; }
  .nav-item.activo::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .nav-badge {
    position: absolute; top: 12px; right: 26%; min-width: 15px; height: 15px; border-radius: 8px;
    background: var(--accent); color: #fff; font: 700 10px/15px Inter, sans-serif; text-align: center; padding: 0 3px;
  }

  .card {
    background: linear-gradient(150deg, rgba(15,148,136,0.08), var(--surface) 60%);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 16px; margin-bottom: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  .card-titulo { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; font-weight: 500; }
  .fila-hora { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .fila-hora:last-child { border-bottom: none; }
  .fila-hora .fecha { font-size: 14px; }
  .fila-hora .fecha .dia-semana { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
  .fila-hora .horas { font-size: 13px; color: var(--text-muted); text-align: right; }
  .badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
  .badge-ok { background: rgba(62,207,142,0.15); color: var(--ok); }
  .badge-warn { background: rgba(245,166,35,0.15); color: var(--warn); }
  .badge-danger { background: rgba(229,72,77,0.15); color: var(--danger); }
  .badge-muted { background: var(--surface2); color: var(--text-muted); }
  .badge-evento { background: rgba(15,148,136,0.15); color: var(--accent); }
  .dia-fecha .badge-evento { display: block; width: fit-content; margin-top: 3px; padding: 1px 6px; font-size: 9.5px; }
  .vacio { color: var(--text-muted); font-size: 13px; padding: 16px 0; text-align: center; }

  /* ── Inicio ── */
  .hoy-card { padding: 18px 16px 16px; }
  .hoy-card-top { display: flex; justify-content: space-between; align-items: center; }
  .estado-en-turno { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: rgba(62,207,142,0.15); color: var(--ok); font: 600 12px/1 Inter, sans-serif; }
  .estado-en-turno .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
  .hoy-horas { display: flex; align-items: flex-end; gap: 18px; margin-top: 16px; }
  .hoy-horas > div { flex: 1; }
  .hoy-horas .label { font: 400 11px/1 Inter, sans-serif; color: var(--text-muted); letter-spacing: 0.05em; }
  .hoy-horas .num { font: 700 30px/1.05 Unbounded, sans-serif; margin-top: 8px; }
  .hoy-horas .separador { flex: 0 0 1px; width: 1px; height: 44px; background: var(--border); }
  .hoy-pie { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font: 400 12.5px/1.4 Inter, sans-serif; color: var(--text-muted); }

  .recorrido-card-inicio {
    border-radius: 16px; border: 1px solid rgba(15,148,136,0.4);
    background: linear-gradient(135deg, rgba(15,148,136,0.22), rgba(20,184,166,0.13) 65%);
    padding: 16px; margin-bottom: 12px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  body.tema-claro .recorrido-card-inicio { background: linear-gradient(135deg, rgba(15,148,136,0.10), rgba(20,184,166,0.07) 65%); box-shadow: none; }
  .recorrido-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .recorrido-card-eyebrow { font: 500 11px/1 Unbounded, sans-serif; color: var(--accent-2); letter-spacing: 0.06em; text-transform: uppercase; }
  .recorrido-card-titulo { font: 700 18px/1.25 Unbounded, sans-serif; margin-top: 8px; }
  .recorrido-card-sub { font: 400 12.5px/1.4 Inter, sans-serif; color: var(--text-muted); margin-top: 4px; }
  .recorrido-card-fecha { font: 400 11px/1.3 Inter, sans-serif; color: var(--text-muted); margin-top: 2px; opacity: 0.8; }
  .recorrido-card-icono {
    width: 38px; height: 38px; border-radius: 10px; background: rgba(15,148,136,0.22);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .recorrido-card-icono svg { width: 20px; height: 20px; color: var(--accent-2); }
  .recorrido-card-cta {
    min-height: 48px; margin-top: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font: 700 15px/1 Inter, sans-serif;
    box-shadow: 0 6px 20px rgba(15,148,136,0.35);
  }
  .recorrido-card-cta svg { width: 15px; height: 15px; }

  /* Globito con la cantidad de tareas del Mural sin tomar -- se apoya
     sobre el tile de "Mural" en Accesos (el tile necesita position:relative
     inline para esto), solo aparece si hay alguna. */
  .mural-card-badge {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--danger); color: #fff;
    font: 700 11px/20px Inter, sans-serif; text-align: center;
    border: 2px solid var(--bg);
  }

  .amber-card { border-radius: 16px; border: 1px solid rgba(245,166,35,0.3); background: rgba(245,166,35,0.07); padding: 14px 16px; margin-bottom: 12px; }
  body.tema-claro .amber-card { border-color: rgba(168,104,0,0.3); background: rgba(168,104,0,0.06); }
  .amber-card-top { display: flex; justify-content: space-between; align-items: center; }
  .amber-card-eyebrow { font: 500 11px/1 Unbounded, sans-serif; color: var(--warn); letter-spacing: 0.06em; text-transform: uppercase; }
  .amber-card-ver-todo { font: 600 12.5px/1 Inter, sans-serif; color: var(--warn); cursor: pointer; }
  .amber-card-item { display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid rgba(245,166,35,0.18); font: 400 13.5px/1 Inter, sans-serif; }
  .amber-card-item:last-child { border-bottom: none; }
  .amber-card-item span:last-child { color: var(--warn); font-size: 12.5px; }

  .accesos-titulo { font: 500 11px/1 Unbounded, sans-serif; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin: 22px 2px 10px; }
  .accesos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .acceso-tile {
    min-height: 88px; border-radius: 14px; border: 1px solid var(--border);
    background: linear-gradient(150deg, rgba(15,148,136,0.08), var(--surface) 60%);
    padding: 14px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
  }
  body.tema-claro .acceso-tile { background: var(--surface); box-shadow: 0 2px 8px rgba(20,22,31,0.05); }
  .acceso-tile svg { width: 19px; height: 19px; color: var(--accent-2); }
  .acceso-tile span { font: 600 13.5px/1.3 Inter, sans-serif; }

  /* ── Mis horas ── */
  .periodo-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 14px; }
  .periodo-pill {
    flex-shrink: 0; min-height: 42px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--border);
    background: var(--surface2); display: flex; align-items: center; font: 500 13px/1 Inter, sans-serif; color: var(--text-muted);
    cursor: pointer; white-space: nowrap;
  }
  .periodo-pill.activo { border-color: rgba(15,148,136,0.5); background: rgba(15,148,136,0.16); color: var(--text); font-weight: 600; }
  .periodo-pill-mas { opacity: 0.75; }

  /* ── Filtro de mes por dropdown (Mural) -- un solo boton compacto en vez
     de una fila de pills, que ocupaba mucho lugar para algo que casi
     siempre se deja en "Todo". ── */
  .periodo-dropdown { position: relative; margin-bottom: 14px; display: inline-block; }
  .periodo-dropdown-btn {
    display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 22px;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer;
    font: 600 13.5px/1 Inter, sans-serif;
  }
  .periodo-dropdown-btn svg:first-child { width: 15px; height: 15px; color: var(--mural-accent); flex-shrink: 0; }
  .periodo-dropdown-chevron { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; }
  .periodo-dropdown-btn[aria-expanded="true"] .periodo-dropdown-chevron { transform: rotate(180deg); }
  .periodo-dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 170px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.3); padding: 6px;
  }
  .periodo-dropdown-item {
    padding: 10px 12px; border-radius: 8px; font: 500 13.5px/1 Inter, sans-serif; color: var(--text); cursor: pointer;
  }
  .periodo-dropdown-item:hover { background: var(--surface2); }
  .periodo-dropdown-item.activo { background: rgba(34,184,207,0.15); color: var(--mural-accent); font-weight: 700; }

  /* ── Aviso informativo (usado en Cuenta: cambio de usuario, ayuda con
     notificaciones) -- misma familia visual que .amber-card pero en el
     color de acento en vez de ambar, para que no se confunda con una
     alerta de "algo esta mal". ── */
  .aviso-info {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
    background: rgba(15,148,136,0.08); border: 1px solid rgba(15,148,136,0.25);
    font: 400 12.5px/1.45 Inter, sans-serif; color: var(--text);
  }
  .aviso-info svg { width: 16px; height: 16px; color: var(--accent-2); flex-shrink: 0; margin-top: 1px; }
  .aviso-info b { color: var(--text); }

  /* ── Cuenta: categorias plegables -- antes era una fila larga de
     tarjetas sueltas sin ningun agrupamiento, dificil de escanear. ── */
  .cuenta-categoria { margin-bottom: 10px; }
  .cuenta-categoria-header {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 4px; cursor: pointer;
    background: none; border: none; border-bottom: 1px solid var(--border); font-family: inherit; text-align: left;
  }
  .cuenta-categoria-header svg:first-child { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
  .cuenta-categoria-titulo { font: 700 14.5px/1 Unbounded, sans-serif; flex: 1; }
  .cuenta-categoria-chevron { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; }
  .cuenta-categoria-header[aria-expanded="true"] .cuenta-categoria-chevron { transform: rotate(180deg); }
  .cuenta-categoria-body { padding-top: 12px; }
  .cuenta-categoria-body.oculto { display: none; }

  .resumen-horas-card { border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(150deg, rgba(15,148,136,0.14), var(--surface) 62%); padding: 18px 16px 16px; margin-bottom: 12px; }
  .resumen-horas-total { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
  .resumen-horas-total .num { font: 700 42px/1 Unbounded, sans-serif; }
  .resumen-horas-total .unidad { font: 400 14px/1 Inter, sans-serif; color: var(--text-muted); }
  .resumen-horas-barra { height: 8px; border-radius: 4px; background: var(--surface2); margin-top: 16px; overflow: hidden; display: flex; }
  .resumen-horas-leyenda { display: flex; gap: 14px; margin-top: 10px; font: 400 11.5px/1 Inter, sans-serif; color: var(--text-muted); flex-wrap: wrap; }
  .resumen-horas-leyenda span { display: flex; align-items: center; gap: 6px; }
  .resumen-horas-leyenda i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
  .resumen-horas-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
  .resumen-horas-stats .num { font: 700 22px/1 Unbounded, sans-serif; }
  .resumen-horas-stats .label { font: 400 11px/1.3 Inter, sans-serif; color: var(--text-muted); margin-top: 5px; }

  .dias-card { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); padding: 14px 16px 4px; }
  .dia-row { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--border); gap: 10px; }
  .dia-row:last-child { border-bottom: none; }
  .dia-row.con-problema { background: rgba(245,166,35,0.07); margin: 0 -16px; padding: 0 16px; }
  .dia-row .dia-fecha { width: 74px; flex-shrink: 0; font: 500 13.5px/1.3 Inter, sans-serif; }
  .dia-row .dia-fecha .dia-semana { color: var(--text-muted); font-weight: 400; font-size: 12px; }
  .dia-row .dia-detalle { flex: 1; font: 400 13.5px/1 Inter, sans-serif; color: var(--text-muted); min-width: 0; }
  .dia-row .dia-derecha { font: 600 14px/1 Inter, sans-serif; flex-shrink: 0; text-align: right; }
  .dia-row .dia-derecha.link { color: var(--warn); cursor: pointer; font-size: 12.5px; }

  .rango-real { color: var(--text-muted); font-size: 12px; margin: -8px 0 14px 2px; }

  /* ── Corregir / formularios ── */
  .corr-problema-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    min-height: 56px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface2); margin-bottom: 8px; cursor: pointer;
  }
  .corr-problema-item.destacado { border-color: rgba(15,148,136,0.5); background: rgba(15,148,136,0.14); }
  .corr-problema-item .fecha { font: 600 14px/1.3 Inter, sans-serif; }
  .corr-problema-item .detalle { font: 400 12px/1.3 Inter, sans-serif; color: var(--text-muted); margin-top: 2px; }
  .corr-problema-item .motivo { font: 600 12.5px/1 Inter, sans-serif; color: var(--warn); flex-shrink: 0; }

  .form-stack { display: flex; flex-direction: column; gap: 10px; }
  .form-stack label { font-size: 12px; color: var(--text-muted); margin-bottom: -4px; }
  .form-stack input, .form-stack select, .form-stack textarea {
    padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 15px; font-family: inherit; width: 100%;
  }
  .form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus { outline: none; border-color: var(--accent); }
  .form-stack textarea { resize: vertical; min-height: 64px; }
  .form-stack button {
    padding: 13px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; font-size: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; margin-top: 4px;
    box-shadow: 0 6px 20px rgba(15,148,136,0.3);
  }
  .form-error { color: var(--danger); font-size: 13px; min-height: 16px; }
  .form-ok { color: var(--ok); font-size: 13px; min-height: 16px; }
  .form-nota { font: 400 12px/1.5 Inter, sans-serif; color: var(--text-muted); text-align: center; margin-top: 4px; }

  /* ── Solicitudes ── */
  .filtro-chips { display: flex; gap: 8px; margin-bottom: 14px; }
  .filtro-chip {
    min-height: 40px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--border);
    background: var(--surface2); display: flex; align-items: center; font: 500 13px/1 Inter, sans-serif; color: var(--text-muted);
    cursor: pointer;
  }
  .filtro-chip.activo { border-color: rgba(15,148,136,0.5); background: rgba(15,148,136,0.16); color: var(--text); font-weight: 600; }

  .solicitud-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
  .solicitud-top { display: flex; justify-content: space-between; align-items: center; }
  .solicitud-tipo { font: 700 11px/1 Inter, sans-serif; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
  .solicitud-resumen { font: 600 15px/1.3 Inter, sans-serif; margin-top: 8px; }
  .solicitud-comparativa { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
  .solicitud-comparativa svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-2); }
  .solicitud-comparativa .col { flex: 1; border-radius: 10px; background: var(--surface2); padding: 10px 12px; }
  .solicitud-comparativa .col.pediste { border: 1px solid rgba(15,148,136,0.4); background: rgba(15,148,136,0.12); }
  .solicitud-comparativa .col .etq { font: 400 10.5px/1 Inter, sans-serif; color: var(--text-muted); letter-spacing: 0.05em; }
  .solicitud-comparativa .col .val { font: 400 13.5px/1 Inter, sans-serif; margin-top: 6px; }
  .solicitud-detalle-txt { font: 400 13px/1.5 Inter, sans-serif; color: var(--text-muted); margin-top: 8px; }
  .solicitud-motivo { font: 400 13px/1.5 Inter, sans-serif; color: var(--danger); margin-top: 8px; }
  .solicitud-fechas { font: 400 11.5px/1.4 Inter, sans-serif; color: var(--text-muted); margin-top: 12px; }

  /* ── Cuenta ── */
  .cuenta-perfil { display: flex; align-items: center; gap: 14px; }
  .cuenta-perfil .avatar-grande {
    width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    display: flex; align-items: center; justify-content: center; font: 700 17px/1 Unbounded, sans-serif;
  }
  .cuenta-perfil .nombre { font: 700 16px/1.3 Unbounded, sans-serif; }
  .cuenta-perfil .sub { font: 400 12.5px/1.3 Inter, sans-serif; color: var(--text-muted); margin-top: 2px; }
  .tema-switch-row { display: flex; align-items: center; justify-content: space-between; }
  .switch { width: 46px; height: 26px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0; }
  .switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); transition: left 0.18s, background 0.18s; }
  .switch.on { background: rgba(15,148,136,0.25); border-color: rgba(15,148,136,0.5); }
  .switch.on .knob { left: 22px; background: var(--accent); }
  .btn-logout {
    width: 100%; padding: 13px; border-radius: 10px; border: 1px solid rgba(229,72,77,0.35); cursor: pointer;
    background: rgba(229,72,77,0.1); color: var(--danger); font-weight: 700; font-size: 14px;
  }

  /* ── Modales ── */
  .modal-overlay {
    position: fixed; inset: 0; background: var(--overlay-bg);
    opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 70;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .modal-overlay.abierto { opacity: 1; pointer-events: auto; }
  .modal-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px 18px 0 0;
    width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
    padding: 20px 18px 28px; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  .modal-overlay.abierto .modal-box { transform: translateY(0); }
  .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .modal-header h3 { font-family: var(--font-display); font-size: 15px; margin: 0; font-weight: 700; }
  .modal-cerrar {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; flex-shrink: 0;
  }

  /* Recorrido diario -- timer, checklist, escaneo real de QR (camara +
     jsQR) y observaciones, todo real. */
  .recorrido-overlay {
    position: fixed; inset: 0; background: var(--bg); z-index: 80;
    display: flex; flex-direction: column; padding: 24px 20px 32px; overflow-y: auto;
  }
  .recorrido-estado.oculto { display: none !important; }
  .recorrido-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; min-height: 60vh; }
  .recorrido-icono { width: 52px; height: 52px; color: var(--accent-2); }
  .recorrido-titulo { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
  .recorrido-sub { color: var(--text-muted); font-size: 14px; max-width: 300px; line-height: 1.4; }
  .recorrido-botones { display: flex; gap: 10px; width: 100%; max-width: 300px; margin-top: 10px; }
  .recorrido-botones button {
    flex: 1; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; border: none;
  }
  .btn-listo {
    padding: 13px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; font-size: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
    box-shadow: 0 6px 20px rgba(15,148,136,0.3);
  }
  .btn-cancelar { background: var(--surface2); border: 1px solid var(--border) !important; color: var(--text); }

  .recorrido-header-curso { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
  .recorrido-timer { font-family: var(--font-display); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .recorrido-progreso-txt { color: var(--text-muted); font-size: 13px; text-align: right; }
  .recorrido-barra { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; margin-bottom: 22px; }
  .recorrido-barra-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.3s; }
  .recorrido-viewfinder {
    flex: 1; min-height: 280px; border: 2px dashed var(--border); border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 20px; margin-bottom: 20px;
    position: relative; overflow: hidden;
  }
  .recorrido-viewfinder svg { width: 44px; height: 44px; opacity: 0.5; }
  #recorrido-viewfinder-idle, #recorrido-viewfinder-cam, #recorrido-viewfinder-ok {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%;
  }
  #recorrido-viewfinder-idle {
    cursor: pointer; border-radius: 14px; padding: 16px; transition: background 0.15s;
  }
  #recorrido-viewfinder-idle:active { background: var(--surface2); }
  #recorrido-viewfinder-idle svg { width: 60px; height: 60px; opacity: 0.6; }
  .recorrido-viewfinder-titulo { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
  .recorrido-viewfinder-sub { font-size: 12.5px; color: var(--text-muted); }
  #recorrido-video { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; background: #000; }
  .recorrido-scan-msg { font-size: 12.5px; color: var(--warn); text-align: center; min-height: 16px; }
  #recorrido-viewfinder-ok .recorrido-check { width: 52px; height: 52px; }
  /* Circulo y tilde se dibujan solos (largo real del trazo, medido a mano
     sobre el viewBox 24x24) y el icono entero hace un pop chico al asentarse. */
  #recorrido-viewfinder-ok .recorrido-check .rc-circulo { stroke-dasharray: 63; stroke-dashoffset: 63; }
  #recorrido-viewfinder-ok .recorrido-check .rc-check { stroke-dasharray: 13; stroke-dashoffset: 13; }
  #recorrido-viewfinder-ok .recorrido-check.anim { animation: rc-pop 0.4s cubic-bezier(.34,1.56,.64,1) 0.32s backwards; }
  #recorrido-viewfinder-ok .recorrido-check.anim .rc-circulo { animation: rc-draw 0.38s cubic-bezier(.4,0,.2,1) forwards; }
  #recorrido-viewfinder-ok .recorrido-check.anim .rc-check { animation: rc-draw 0.28s ease-out 0.3s forwards; }
  @keyframes rc-draw { to { stroke-dashoffset: 0; } }
  @keyframes rc-pop { 0% { transform: scale(0.85); } 100% { transform: scale(1); } }
  #recorrido-viewfinder-ok .recorrido-viewfinder-titulo { color: var(--ok); }
  .recorrido-punto-actual { font-family: var(--font-display); font-size: 15px; color: var(--text); font-weight: 700; }
  .btn-escanear {
    width: 100%; padding: 15px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; font-size: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; margin-bottom: 12px;
  }
  .recorrido-pie-acciones { display: flex; align-items: center; justify-content: center; gap: 4px; }
  .btn-cancelar-recorrido {
    background: none; border: none; color: var(--text-muted); font-size: 13px; padding: 8px; cursor: pointer;
  }
  .btn-cancelar-recorrido:disabled { opacity: 0.35; cursor: default; }
  .recorrido-pie-acciones .btn-cancelar-recorrido:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--border); }
  .recorrido-check { width: 60px; height: 60px; color: var(--ok); }
  .recorrido-tiempo-final { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 4px 0 2px; }

  .recorrido-punto-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
  .recorrido-punto-nombre { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .recorrido-checklist { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
  .recorrido-checklist li { margin-bottom: 2px; }
  .recorrido-obs-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
  #recorrido-observaciones {
    width: 100%; box-sizing: border-box; padding: 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 14px; font-family: inherit;
    resize: vertical; min-height: 70px; margin-bottom: 14px;
  }
  #recorrido-observaciones:focus { outline: none; border-color: var(--accent); }
  /* Pantalla "Recorrido completo": ancho real de la pantalla (no un
     recuadro angosto) y sin recorte de scroll propio -- ya scrollea el
     overlay entero, no hace falta una caja chica adentro de otra. */
  .recorrido-resumen-obs { width: 100%; max-width: 460px; margin-top: 8px; text-align: left; }
  .recorrido-resumen-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
  .recorrido-resumen-punto { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
  .recorrido-resumen-texto { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
  .recorrido-resumen-foto { display: block; width: 100%; max-width: 100%; border-radius: 10px; margin-top: 10px; }
  /* La pantalla final ya no se centra en un bloque chico -- arranca arriba
     (mismo criterio que la pantalla de confirmacion) para que el resumen
     con fotos tenga todo el ancho y alto que necesite, sin verse apretado. */
  #recorrido-completo .recorrido-centro { justify-content: flex-start; padding-top: 4vh; min-height: 0; }

  /* Lista resumida de todos los puntos en la pantalla de confirmacion --
     asi el que va a recorrer sabe de entrada que se va a encontrar, sin
     tener que arrancar el recorrido para verlo. */
  /* La lista vive dentro del overlay, que ya scrollea solo -- sin scroll
     propio ademas (quedaba un scroll adentro de otro scroll, feo y
     confuso). La pantalla de confirmacion arranca arriba en vez de
     centrada (ver mas abajo) para que una lista larga no empuje todo
     fuera de la pantalla. */
  .recorrido-resumen-puntos { width: 100%; max-width: 340px; text-align: left; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
  .recorrido-resumen-punto-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; }
  .recorrido-resumen-punto-num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
  }
  .recorrido-resumen-punto-nombre { color: var(--text); line-height: 1.35; font-weight: 500; }
  #recorrido-confirmar .recorrido-centro { justify-content: flex-start; padding-top: 6vh; min-height: 0; }

  .btn-foto-recorrido {
    width: 100%; padding: 12px; border-radius: 10px; border: 1px dashed var(--border); cursor: pointer; font-weight: 600; font-size: 13.5px;
    background: var(--surface2); color: var(--text); margin-bottom: 12px;
  }
  /* Grilla de miniaturas -- se puede cargar mas de una foto por punto
     (hasta MAX_FOTOS_RECORRIDO), cada una con su propia "x" para sacarla. */
  .recorrido-fotos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
  .recorrido-fotos-grid:empty { display: none; margin: 0; }
  .recorrido-foto-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface2); }
  .recorrido-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .recorrido-foto-thumb button {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.6); color: white; font-size: 13px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .btn-foto-recorrido:disabled { opacity: 0.45; cursor: default; }

  /* Modal chico de confirmacion sobre el estado "curso" -- para no perder
     el progreso del recorrido con un toque accidental en "Cancelar". */
  .recorrido-confirm-modal {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 90;
  }
  .recorrido-confirm-modal-box { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; max-width: 320px; width: 100%; }
  .recorrido-confirm-modal-titulo { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
  .recorrido-confirm-modal-texto { color: var(--text-muted); font-size: 13px; line-height: 1.4; margin-bottom: 16px; }
  .btn-peligro { background: linear-gradient(135deg, var(--danger), #b23b3b) !important; }
  .periodo-selector { display: flex; gap: 8px; margin-bottom: 6px; }
  .periodo-selector input[type="month"] {
    flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 14px;
    font-family: var(--font-body); font-weight: 600;
  }
  /* Safari ignora font-family en el texto interno de type="month" salvo
     que se lo pidas puntualmente via -webkit-locale / los pseudo-elementos
     del control -- esto cubre Chrome/Android (donde si se respeta) y
     evita que quede con la tipografia del sistema en vez de la del sitio. */
  .periodo-selector input[type="month"]::-webkit-datetime-edit,
  .periodo-selector input[type="month"]::-webkit-datetime-edit-fields-wrapper,
  .periodo-selector input[type="month"]::-webkit-datetime-edit-text,
  .periodo-selector input[type="month"]::-webkit-datetime-edit-month-field,
  .periodo-selector input[type="month"]::-webkit-datetime-edit-year-field {
    font-family: var(--font-body); font-weight: 600; color: var(--text);
  }
  .periodo-selector button {
    padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 13px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
  }

  /* Novedades como mural: agrupadas por dia, cada dia es un acordeon que
     se puede plegar (por defecto solo el dia mas reciente arranca
     abierto) -- si no, con el correr de los dias se amontona todo en una
     lista interminable. La fecha no se repite en cada tarjeta -- la del
     grupo alcanza, la tarjeta muestra la hora nada mas. */
  .novedades-dia-grupo { margin-bottom: 6px; }
  .novedades-dia-header {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 4px 2px; margin: 22px 0 10px; cursor: pointer;
    font-family: inherit; text-align: left;
  }
  .novedades-dia-grupo:first-child .novedades-dia-header { margin-top: 0; }
  .novedades-dia-titulo {
    font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .novedades-dia-cant {
    font-size: 11px; font-weight: 700; color: var(--accent-2); background: var(--surface2);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
  }
  .novedades-dia-chevron { width: 15px; height: 15px; color: var(--text-muted); margin-left: auto; transition: transform 0.15s; flex-shrink: 0; }
  .novedades-dia-header[aria-expanded="true"] .novedades-dia-chevron { transform: rotate(180deg); }
  .novedades-dia-items.oculto { display: none; }
  .novedad-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }

  .mural-banner-notif { display: flex; align-items: center; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
  .mural-banner-icono { font-size: 20px; flex-shrink: 0; }
  .mural-banner-texto { flex: 1; min-width: 0; }
  .mural-banner-titulo { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
  .mural-banner-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
  .mural-banner-activar { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
  .mural-banner-cerrar { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; flex-shrink: 0; }

  .mural-stepper { display: flex; align-items: center; margin: 12px 0 4px; }
  .mural-stepper-paso { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
  .mural-stepper-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--border); border: 2px solid var(--border); z-index: 1; }
  .mural-stepper-label { font-size: 10px; color: var(--text-muted); margin-top: 5px; text-align: center; }
  .mural-stepper-linea { position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
  .mural-stepper-paso:first-child .mural-stepper-linea { display: none; }
  .mural-stepper-paso.completo .mural-stepper-dot { background: var(--ok); border-color: var(--ok); }
  .mural-stepper-paso.completo .mural-stepper-linea { background: var(--ok); }
  .mural-stepper-paso.activo .mural-stepper-dot { background: var(--accent); border-color: var(--accent); }
  .mural-stepper-paso.activo .mural-stepper-label { color: var(--text); font-weight: 700; }
  .mural-audiencia-badge { display: inline-block; background: var(--surface3, var(--surface2)); color: var(--text-muted); font-size: 11px; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; }
  .mural-reclamar-btn { width: 100%; padding: 11px; border-radius: 10px; border: none; background: var(--accent); color: white; font-weight: 700; font-size: 13px; cursor: pointer; margin-top: 10px; }
  .mural-estado-txt { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
  .mural-vencimiento-badge { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
  .mural-vencimiento-badge.vencido { color: #ff6b6b; font-weight: 700; }
  .mural-finalizar-wrap { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .mural-finalizar-foto-btn {
    width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2);
    color: var(--text); font-weight: 600; font-size: 12.5px; cursor: pointer;
  }
  .mural-finalizar-foto-btn:disabled { opacity: 0.6; cursor: default; }
  .novedad-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
  .novedad-punto { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
  .novedad-hora {
    font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
  }
  .novedad-texto { font-size: 13.5px; color: var(--text); margin-bottom: 10px; line-height: 1.45; }
  .novedad-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
  .novedad-fotos.una-foto { grid-template-columns: 1fr; }
  .novedad-foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; display: block; }
  .novedad-fotos.una-foto .novedad-foto { aspect-ratio: 16/10; }
  .novedad-usuario { font-size: 11.5px; color: var(--accent-2); font-weight: 600; margin-bottom: 10px; }

  .novedad-comentarios { border-top: 1px solid var(--border); padding-top: 10px; }
  .novedad-comentario { font-size: 12.5px; margin-bottom: 6px; line-height: 1.4; }
  .novedad-comentario b { color: var(--text); }
  .novedad-comentario span { color: var(--text-muted); }
  .novedad-comentario-form { display: flex; gap: 6px; margin-top: 8px; }
  .novedad-comentario-form input {
    flex: 1; min-width: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-size: 12.5px;
  }
  .novedad-comentario-form input:focus { outline: none; border-color: var(--accent); }

  .onboard-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 210;
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .onboard-box {
    position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 18px;
    padding: 30px 24px 22px; max-width: 340px; width: 100%; text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  }
  .onboard-cerrar {
    position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface2); border: none; color: var(--text-muted); font-size: 14px; cursor: pointer;
  }
  .onboard-logo { height: 42px; width: auto; margin-bottom: 16px; }
  .onboard-titulo { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 8px; }
  .onboard-sub { color: var(--text-muted); font-size: 13.5px; line-height: 1.45; margin-bottom: 4px; }
  .onboard-pasos { text-align: left; margin: 18px 0; }
  .onboard-pasos:empty { margin: 0; }
  .onboard-paso { display: flex; gap: 10px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.4; color: var(--text); }
  .onboard-paso:last-child { margin-bottom: 0; }
  .onboard-paso-num {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--surface2); color: var(--accent-2);
    font-weight: 700; font-size: 11.5px; display: flex; align-items: center; justify-content: center;
  }
  .onboard-mas-tarde { width: 100%; background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 700; padding: 8px; cursor: pointer; }

  .lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  .lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 6px; }
  .lightbox-cerrar {
    position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none; color: white; font-size: 18px; cursor: pointer;
  }

  .config-notif-desc { color: var(--text-muted); font-size: 13px; line-height: 1.4; margin: 0 0 14px; }
  .btn-notif {
    width: 100%; padding: 13px; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; font-size: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
  }
  .btn-notif:disabled { opacity: 0.6; cursor: default; }
  .config-notif-estado { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; min-height: 16px; }

  .perfil-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 18px; font-weight: 700; overflow: hidden;
  }
  .perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .modal-form input:disabled { opacity: 0.55; cursor: not-allowed; }

  .crop-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 220;
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .crop-box {
    background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 24px;
    max-width: 340px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  }
  .crop-titulo { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .crop-sub { color: var(--text-muted); font-size: 12.5px; margin-bottom: 16px; }
  .crop-canvas-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
  #crop-canvas { border-radius: 12px; background: var(--surface2); cursor: grab; touch-action: none; }
  #crop-canvas:active { cursor: grabbing; }
  .crop-zoom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--text-muted); }
  .crop-zoom-row svg { width: 16px; height: 16px; flex-shrink: 0; }
  .crop-zoom-row svg:last-child { width: 22px; height: 22px; }
  .crop-zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); }
  .crop-botones { display: flex; gap: 10px; }
  .crop-botones button { flex: 1; padding: 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; font-family: inherit; }
  #crop-cancelar-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
  #crop-guardar-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; border: none; }

  .acc-fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
  .acc-fila-titulo { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
  .acc-fila-sub { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
  .tamano-letra-grupo { display: flex; gap: 6px; flex-shrink: 0; }
  .tamano-letra-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 10px; min-width: 48px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    cursor: pointer; font-weight: 700; font-family: var(--font-body);
  }
  .tamano-letra-btn[data-tam="chico"] { font-size: 11px; }
  .tamano-letra-btn[data-tam="mediano"] { font-size: 14px; }
  .tamano-letra-btn[data-tam="grande"] { font-size: 17px; }
  .tamano-letra-btn span { font-size: 9px; font-weight: 600; color: var(--text-muted); }
  .tamano-letra-btn.activo { border-color: var(--accent); background: rgba(15,148,136,0.16); }

  .btn-leer-voz {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface2); border: 1px solid var(--border); color: var(--accent-2); cursor: pointer; flex-shrink: 0; padding: 0;
    margin-left: 6px; vertical-align: middle;
  }
  .btn-leer-voz svg { width: 12px; height: 12px; }

  html.letra-chico { zoom: 0.88; }
  html.letra-grande { zoom: 1.16; }

  #app-screen { display: none; }
  .oculto { display: none !important; }

/* Logo gris claro sobre transparente: en modo claro se oscurece con un filtro. */
body.tema-claro .login-logo,
body.tema-claro .onboard-logo { filter: invert(0.9); }

/* Modal "Quién está hoy": lista agrupada por tipo de turno, mismo lenguaje
   visual que ya usa el panel de admin para lo mismo. */
.turno-hoy-grupo-titulo { font: 700 12px/1.3 Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 16px 0 8px; }
.turno-hoy-grupo-titulo:first-child { margin-top: 0; }
.turno-hoy-fila { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.turno-hoy-fila:last-child { border-bottom: none; }
.turno-hoy-fila-tipo { color: var(--text); font-weight: 600; white-space: nowrap; }
.turno-hoy-fila-nombres { color: var(--text-muted); text-align: right; }
.turno-hoy-fila-nombres b { color: var(--accent-2); font-weight: 700; }

/* Tarjeta de accesos "ancha": cuando la cantidad de tarjetas visibles es
   impar, la ultima ocupa la fila completa pero con el icono al costado (no
   arriba, como las cuadradas) -- se lee como una tarjeta destacada a
   proposito, no como una que quedo sola por accidente. */
.acceso-tile.acceso-tile-ancho {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; text-align: left;
}