: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;
    --serie1: #14b8a6; --serie2: #ff9f5a;
    --header-bg-1: rgba(10,12,18,0.92); --header-bg-2: rgba(10,12,18,0.82);
    --hero-tint-1: rgba(10,12,18,0.80); --hero-tint-2: rgba(10,12,18,0.92);
    --font-display: 'Unbounded', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  }
  /* Modo claro -- togglea las mismas variables que ya usa la app de
     empleado (mismo criterio, ver public/app/index.html), asi el panel se
     ve consistente con ella. */
  body.tema-claro {
    --bg: #e9ebf2; --surface: #ffffff; --surface2: #e3e6ee; --border: #d3d7e2;
    --text: #171923; --text-muted: #5d6273;
    --accent: #6249d6; --accent-hover: #5138c2; --accent-2: #2f6fe0;
    --header-bg-1: rgba(255,255,255,0.94); --header-bg-2: rgba(255,255,255,0.85);
    --hero-tint-1: rgba(233,235,242,0.78); --hero-tint-2: rgba(233,235,242,0.92);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh; font-variant-numeric: tabular-nums;
    position: relative;
    transition: background 0.2s, color 0.2s;
  }
  /* Foto de fondo fija con position:fixed en vez de background-attachment:fixed
     -- ese ultimo tiene un bug conocido en Chrome que corta la imagen a la
     mitad de la pantalla en vez de cubrirla entera. Con un pseudo-elemento
     fixed independiente no pasa. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -2;
    background-image: url('/panel/edificio-hero.jpg');
    background-size: cover; background-position: center 35%; background-repeat: no-repeat;
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(ellipse 900px 600px at 100% 0%, rgba(15,148,136,0.10), transparent 60%),
                       radial-gradient(ellipse 700px 500px at 0% 100%, rgba(20,184,166,0.06), transparent 60%),
                       linear-gradient(180deg, var(--hero-tint-1), var(--hero-tint-2) 30%, var(--bg) 68%);
  }
  h3 { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; }
  header {
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    background: linear-gradient(180deg, var(--header-bg-1), var(--header-bg-2));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: sticky; top: 0; z-index: 30;
  }
  header .header-left { display: flex; align-items: center; gap: 14px; }
  .header-logo-badge {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    height: 44px;
  }
  .header-logo-badge img { height: 42px; width: auto; }
  header h1 { font-family: var(--font-display); font-size: 16px; margin: 0; font-weight: 700; letter-spacing: 0.01em; }
  header h1 span { color: var(--text-muted); font-weight: 400; font-family: var(--font-body); font-size: 13px; }
  header button { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }

  .header-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .header-icon-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; position: relative; flex-shrink: 0;
  }
  .header-icon-btn svg { width: 17px; height: 17px; }
  .notif-wrap, .avatar-wrap { position: relative; }
  .notif-panel, .avatar-dropdown {
    position: absolute; top: 46px; right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35); z-index: 60;
  }
  .notif-panel { width: 260px; padding: 8px; max-height: 340px; overflow-y: auto; }
  .notif-panel .notif-vacio { color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 14px 0; }
  .notif-badge {
    position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--danger); color: white; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none;
  }
  .notif-item { display: block; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: var(--text); }
  .notif-item:hover { background: var(--surface2); }
  .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; }
  .avatar-dropdown { width: 230px; padding: 8px; }
  .avatar-dropdown-header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
  .avatar-dropdown-avatar { width: 38px; height: 38px; font-size: 13px; flex-shrink: 0; }
  .avatar-dropdown-nombre { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
  .avatar-dropdown-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
  .avatar-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px;
    color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
    background: none; border: none; font-family: var(--font-body);
  }
  .avatar-dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
  .avatar-dropdown-item:hover { background: var(--surface2); }
  .avatar-dropdown-item:disabled { cursor: default; opacity: 0.6; }
  .avatar-dropdown-item:disabled:hover { background: none; }
  .avatar-dropdown-item.danger { color: var(--danger); }
  .avatar-dropdown-item.danger svg { color: var(--danger); }
  .avatar-dropdown-divisor { height: 1px; background: var(--border); margin: 6px 4px; }

  .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; }

  .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-box .btn { margin: 6px 0 8px; }
  .onboard-mas-tarde { width: 100%; background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 700; padding: 8px; cursor: pointer; }
  .oculto { display: none !important; }

  .mural-stepper { display: flex; align-items: center; margin: 14px 0 4px; }
  .mural-stepper-paso { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
  .mural-stepper-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); border: 2px solid var(--border); z-index: 1; }
  .mural-stepper-label { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; text-align: center; }
  .mural-stepper-linea { position: absolute; top: 6px; 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-wrap { position: relative; }
  .mural-audiencia-menu {
    position: absolute; top: 40px; left: 0; z-index: 60; width: 230px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35); padding: 6px;
  }
  .mural-audiencia-menu button {
    display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 7px;
    background: none; border: none; color: var(--text); font-size: 13px; font-family: var(--font-body); cursor: pointer;
  }
  .mural-audiencia-menu button:hover { background: var(--surface2); }

  .mural-textarea {
    width: 100%; box-sizing: border-box; resize: vertical; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  }
  .mural-textarea:focus { outline: none; border-color: var(--accent); }
  .mural-vencimiento-input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 13px; font-family: var(--font-body); }
  .mural-responsable-select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 12.5px; font-family: var(--font-body); }
  .mural-vencimiento-badge { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
  .mural-vencimiento-badge.vencido { color: var(--danger); font-weight: 700; }

  .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; }
  header button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); }

  .novedad-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
  .novedad-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
  .novedad-punto { font-family: var(--font-display); font-size: 14px; font-weight: 700; }
  .novedad-fecha { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
  .novedad-usuario { color: var(--text-muted); font-size: 12.5px; margin-bottom: 8px; }
  .novedad-obs { font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; }
  .novedad-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .novedad-fotos img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
  .novedad-comentarios { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
  .novedad-comentario { font-size: 12.5px; margin-bottom: 6px; }
  .novedad-comentario b { color: var(--text); }
  .novedad-comentario span { color: var(--text-muted); }
  .novedad-comentar-row { display: flex; gap: 8px; margin-top: 8px; }
  .novedad-comentar-row input { flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 12.5px; }
  .novedad-comentar-row button { flex-shrink: 0; }

  .config-categoria { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
  .config-categoria-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; cursor: pointer; }
  .config-categoria-header:hover { background: var(--surface2); }
  .config-categoria-kicker { font-size: 11px; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 3px; }
  .config-categoria-titulo { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
  .config-categoria-chevron { width: 18px; height: 18px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; margin-left: 12px; }
  .config-categoria.abierto .config-categoria-chevron { transform: rotate(180deg); }
  .config-categoria-body { padding: 0 18px 18px; display: none; }
  .config-categoria.abierto .config-categoria-body { display: block; }

  .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
  .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.15s; cursor: pointer; }
  .switch-track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
  .switch input:checked + .switch-track { background: var(--accent); }
  .switch input:checked + .switch-track::before { transform: translateX(20px); }

  .acc-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
  .acc-fila-titulo { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
  .tamano-letra-grupo { display: flex; gap: 8px; flex-shrink: 0; }
  .tamano-letra-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; min-width: 56px;
    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: 12px; }
  .tamano-letra-btn[data-tam="mediano"] { font-size: 15px; }
  .tamano-letra-btn[data-tam="grande"] { font-size: 18px; }
  .tamano-letra-btn span { font-size: 10px; font-weight: 600; color: var(--text-muted); }
  .tamano-letra-btn.activo { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); }

  .btn-leer-voz {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; 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: 13px; height: 13px; }

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

  #hamburguesa-btn {
    background: none; border: 1px solid var(--border); color: var(--text);
    width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0; font-size: 18px; flex-shrink: 0;
  }
  #hamburguesa-btn:hover { border-color: var(--text-muted); }

  #sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40;
  }
  #sidebar-overlay.abierto { display: block; }

  #sidebar-edge-hover { position: fixed; top: 0; left: 0; bottom: 0; width: 14px; z-index: 45; }
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 50;
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 55%);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border); box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    transform: translateX(-100%); transition: transform 0.2s ease;
    display: flex; flex-direction: column; padding: 20px 14px; gap: 3px;
  }
  #sidebar.abierto { transform: translateX(0); }
  #sidebar .sidebar-titulo {
    padding: 0 10px 16px; font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  #sidebar button.tab-btn {
    background: none; border: 1px solid transparent; color: var(--text-muted); text-align: left;
    padding: 11px 14px; font-size: 14px; font-weight: 500; letter-spacing: 0.015em; cursor: pointer; border-radius: 10px;
    transition: background 0.15s, color 0.15s, transform 0.1s, letter-spacing 0.15s;
  }
  #sidebar button.tab-btn:hover {
    color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, var(--surface2));
    transform: translateX(2px); letter-spacing: 0.03em;
  }
  #sidebar button.tab-btn.activo {
    color: var(--text); font-weight: 700;
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  #sidebar button.tab-btn.activo:hover { color: var(--text); letter-spacing: 0.015em; }

  main { max-width: 960px; margin: 0 auto; padding: 24px; }

  .form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
  .form-field { display: flex; flex-direction: column; gap: 4px; }
  .form-field label { font-size: 12px; color: var(--text-muted); }
  .form-field input, .form-field select { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 13px; }
  .btn-accent { background: var(--accent); color: white; }
  .btn-accent:hover { background: var(--accent-hover); }

  #login-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.42) 65%, var(--bg) 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%;
  }
  .login-box {
    background: linear-gradient(165deg, rgba(23,27,44,0.72), rgba(18,21,31,0.72));
    border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px; padding: 40px 36px; 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: 56px; width: auto; margin-bottom: 18px; opacity: 0.95; }
  .login-box h2 { font-family: var(--font-display); margin: 0 0 6px; font-size: 17px; letter-spacing: 0.01em; font-weight: 700; }
  .login-box p { color: var(--text-muted); font-size: 13px; margin: 0 0 26px; }
  .login-box input {
    width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,12,18,0.5); color: var(--text); font-size: 14px; text-align: center;
    transition: border-color 0.15s; margin-bottom: 10px;
  }
  .login-box input:focus { outline: none; border-color: rgba(255,255,255,0.18); }
  .login-box button {
    width: 100%; margin-top: 14px; padding: 12px; border-radius: 8px; border: none;
    background: #eef0f6; color: #0a0c12; font-weight: 700; cursor: pointer; font-size: 14px;
    transition: filter 0.15s, transform 0.15s; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .login-box button:hover { filter: brightness(0.92); transform: translateY(-1px); }
  .login-error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 16px; }
  .login-ok { color: var(--ok); font-size: 13px; margin-top: 10px; min-height: 16px; }
  .login-soporte {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
    font: 400 12px/1 var(--font-body); 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; }

  .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; }
  .perfil-avatar-header { width: 38px; height: 38px; font-size: 13px; cursor: pointer; }

  nav { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
  nav button {
    background: none; border: none; color: var(--text-muted); padding: 10px 14px;
    cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  nav button.activo { color: var(--text); border-bottom-color: var(--accent); }

  .card {
    background: linear-gradient(140deg, color-mix(in srgb, var(--card-accent, var(--accent)) 14%, var(--surface)), var(--surface) 60%);
    border: 1px solid var(--border); border-left: 3px solid var(--card-accent, var(--accent));
    border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  }
  .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); border-left-color: var(--card-accent, var(--accent)); }
  .card-content { display: flex; align-items: center; gap: 12px; }
  .card-icono { font-size: 20px; flex-shrink: 0; }
  .card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .card-titulo { font-weight: 600; font-size: 14px; }
  .card-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
  .card-acciones { display: flex; gap: 8px; flex-shrink: 0; }
  .btn { border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter 0.12s, transform 0.12s, box-shadow 0.12s; font-family: var(--font-body); }
  .btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
  .btn-ok { background: linear-gradient(135deg, #4fe0a3, var(--ok)); color: #06231a; box-shadow: 0 4px 14px rgba(62,207,142,0.25); }
  .btn-danger { background: linear-gradient(135deg, #f16469, var(--danger)); color: white; box-shadow: 0 4px 14px rgba(229,72,77,0.25); }
  .btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

  .vacio { color: var(--text-muted); font-size: 14px; padding: 20px 0; text-align: center; }
  .stat-nota { background: linear-gradient(150deg, rgba(15,148,136,0.06), var(--surface) 60%); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

  .seccion-pendiente {
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent-seccion, var(--accent)) 10%, var(--surface)), var(--surface) 65%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-seccion, var(--accent));
    border-radius: 14px; padding: 18px 20px; margin-bottom: 18px;
  }
  .seccion-pendiente h3 { font-family: var(--font-display); margin: 0 0 14px 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
  .badge-count {
    background: var(--accent-seccion, var(--accent)); color: #06070a; font-size: 12px; font-weight: 800;
    border-radius: 100px; padding: 2px 10px; min-width: 22px; text-align: center;
  }
  .vacio-ok {
    display: flex; align-items: center; gap: 10px; color: var(--ok); text-align: left;
    background: rgba(62,207,142,0.08); border: 1px solid rgba(62,207,142,0.25);
    border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600;
  }

  .historial-mini { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
  .historial-mini-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
  .historial-mini-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); }
  .historial-mini-item:last-child { border-bottom: none; }
  .historial-mini-estado { font-size: 12px; font-weight: 700; flex-shrink: 0; }
  .historial-mini-estado.aprobada { color: var(--ok); }
  .historial-mini-estado.rechazada { color: var(--danger); }

  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

  .medidores-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
  .medidor {
    background: linear-gradient(150deg, rgba(15,148,136,0.08), var(--surface) 60%);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    flex: 1; min-width: 150px;
  }
  .medidor svg { display: block; }
  .medidor-label { margin-top: 6px; font-size: 13px; color: var(--text); font-weight: 600; }
  .medidor-sublabel { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

  .sistema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .sistema-item { display: flex; align-items: center; gap: 10px; }
  .sistema-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .sistema-dot.dot-ok { background: var(--ok); }
  .sistema-dot.dot-warn { background: var(--warn); }
  .sistema-dot.dot-danger { background: var(--danger); }
  .sistema-texto .sistema-valor { font-size: 14px; font-weight: 600; }
  .sistema-texto .sistema-label { font-size: 12px; color: var(--text-muted); }

  .turnos-leyenda { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11.5px; color: var(--text-muted); }
  .turnos-leyenda .item { display: flex; align-items: center; gap: 5px; }
  .turnos-leyenda .swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .badge-turno { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
  .badge-turno .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .badge-turno.destacado { font-weight: 800; font-size: 13px; }

  .conserjeria-grid { display: flex; flex-direction: column; gap: 10px; }
  .conserjeria-ficha { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(150deg, rgba(15,148,136,0.07), var(--surface2) 65%); }
  .conserjeria-ficha .avatar { width: 38px; height: 38px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
  .conserjeria-ficha .info { flex: 1; min-width: 0; }
  .conserjeria-ficha .nombre { font-weight: 700; font-size: 14px; }
  .conserjeria-ficha .detalle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
  .conserjeria-ficha .estado-hoy { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; flex-shrink: 0; white-space: nowrap; }
  .conserjeria-ficha .estado-hoy.trabaja { background: rgba(62,207,142,0.15); color: var(--ok); }
  .conserjeria-ficha .estado-hoy.franco { background: rgba(138,145,158,0.15); color: var(--text-muted); }

  .turnos-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
  @media (max-width: 900px) { .turnos-grid { grid-template-columns: 1fr; } }
  /* minmax(0, 1fr), no 1fr solo -- si no, el min-width de las tablas de
     adentro (.tabla-scroll table) hace que las columnas del grid crezcan
     desparejo para acomodar ese contenido, en vez de quedar 50/50. Con el
     0 como piso, el overflow lo absorbe el scroll horizontal de cada tabla,
     no el ancho de la columna. */
  .horas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
  @media (max-width: 900px) { .horas-grid { grid-template-columns: 1fr; } }
  /* Estas dos tablas son mas angostas (media caja en vez de todo el ancho),
     asi que no les entra el min-width de 560px de .tabla-scroll -- sin
     scroll, mas compactas, para que entren las 5 columnas de una. */
  .horas-grid .tabla-scroll table { min-width: 0; font-size: 12.5px; }
  .horas-grid .tabla-scroll th, .horas-grid .tabla-scroll td { padding: 9px 8px; }
  .fila-subtotal td { font-weight: 800; border-top: 2px solid var(--accent); background: rgba(15,148,136,0.08); }
  .turnos-card { background: linear-gradient(150deg, rgba(15,148,136,0.06), var(--surface) 55%); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
  .turnos-card h3 { font-family: var(--font-display); font-weight: 500; margin: 0 0 12px; }
  .turnos-tabla-wrap {
    max-height: 560px; overflow: auto; border-radius: 8px; border: 1px solid var(--border);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .turnos-tabla-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
  .turnos-tabla-wrap::-webkit-scrollbar-track { background: transparent; }
  .turnos-tabla-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; border: 2px solid var(--surface); background-clip: padding-box; }
  .turnos-tabla-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
  .tabla-turnos { width: 100%; border-collapse: collapse; font-size: 13px; }
  .tabla-turnos thead th { position: sticky; top: 0; background: var(--surface2); z-index: 1; padding: 10px 6px; border-bottom: 1px solid var(--border); }
  .tabla-turnos th.col-dia, .tabla-turnos td.col-dia { text-align: left; padding-left: 10px; }
  .tabla-turnos th.col-empleado { text-align: center; min-width: 74px; }
  .tabla-turnos th .nombre-grande { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
  .tabla-turnos th .apellido-chico { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 1px; }
  .tabla-turnos td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--border); }
  .tabla-turnos td.col-dia { font-weight: 600; white-space: nowrap; }
  .fila-hoy { background: rgba(20,184,166,0.13) !important; }
  .fila-hoy td.col-dia { color: var(--accent); }
  .col-dia-feriado { color: var(--danger); }
  .tag-hoy { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px; background: var(--accent); color: white; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; }
  .turno-hoy-titulo { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 10px; }
  .turno-hoy-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
  .turno-hoy-card {
    flex: 1; min-width: 220px; border-radius: 16px; padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform 0.15s;
  }
  .turno-hoy-card:hover { transform: translateY(-2px); }
  .turno-hoy-cabecera { display: flex; align-items: center; gap: 12px; }
  .turno-hoy-icono {
    font-size: 26px; width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .turno-hoy-nombre { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.25; }
  .turno-hoy-horario { font-size: 12px; color: var(--text-muted); font-weight: 600; }
  .turno-hoy-personas { display: flex; flex-wrap: wrap; gap: 8px; }
  .turno-hoy-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.07); border-radius: 100px; padding: 5px 14px 5px 5px;
    font-size: 14px; font-weight: 700; color: var(--text);
  }
  .turno-hoy-avatar {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #06070a; flex-shrink: 0;
  }
  .stat-tile {
    background: linear-gradient(150deg, rgba(15,148,136,0.10), var(--surface) 65%);
    border: 1px solid var(--border); border-top: 3px solid var(--accent);
    border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  .stat-tile.stat-ok { border-top-color: var(--ok); }
  .stat-tile.stat-warn { border-top-color: var(--warn); }
  .stat-tile .stat-valor {
    font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
    background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--accent) 55%, var(--text)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat-tile .stat-label { margin-top: 6px; font-size: 13px; color: var(--text-muted); }

  .chart-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: 13px; color: var(--text-muted); }
  .chart-legend .item { display: flex; align-items: center; gap: 6px; }
  .chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }

  /* Contenedor con scroll horizontal para las tablas comunes -- sin esto,
     en celular una tabla ancha (muchas columnas, ej Fichadas por empleado)
     se desborda y corta texto en vez de dejar hacer swipe para verla entera. */
  .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla-scroll::-webkit-scrollbar { height: 8px; }
  .tabla-scroll::-webkit-scrollbar-track { background: transparent; }
  .tabla-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; border: 2px solid var(--surface); background-clip: padding-box; }
  .tabla-scroll table { margin-bottom: 0; min-width: 560px; width: 100%; }

  table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: linear-gradient(150deg, rgba(15,148,136,0.05), var(--surface) 40%);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25); margin-bottom: 12px;
  }
  th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  th {
    color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; background: var(--surface2); border-bottom: 1px solid var(--border);
  }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:nth-child(even) { background: rgba(15,148,136,0.03); }
  tbody tr:hover { background: rgba(15,148,136,0.10); }
  .badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; }
  .badge-si { background: rgba(62,207,142,0.15); color: var(--ok); }
  .badge-no { background: rgba(229,72,77,0.15); color: var(--danger); }

  select, .periodo-input { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 13px; }
  .toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px;
    border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity 0.2s; pointer-events: none;
  }
  .toast.mostrar { opacity: 1; }

/* Nombre de empleado clickeable en las tablas de horas */
.emp-link { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; cursor: pointer; transition: color .15s, border-color .15s; }
.emp-link:hover, .emp-link:focus-visible { color: var(--accent, #2dd4bf); border-bottom-color: currentColor; outline: none; }

/* El logo es gris claro sobre transparente (pensado para fondo oscuro): en modo
   claro se oscurece con un filtro, en vez de esconderlo detras de un circulo negro. */
body.tema-claro .header-logo-badge img,
body.tema-claro .login-logo { filter: invert(0.9); }

/* Tarjetas de horas con comparacion porcentual contra el periodo anterior */
.stat-tile.stat-comparado { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 22px; }
.stat-sublabel { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat-delta { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.stat-delta.delta-neutro { color: var(--accent-2); background: rgba(20,184,166,0.14); }
.stat-delta.delta-mas-costo { color: #f5a623; background: rgba(245,166,35,0.15); }
.stat-delta.delta-menos-costo { color: #3ecf8e; background: rgba(62,207,142,0.15); }
.stat-delta.delta-igual { color: var(--text-muted); background: rgba(139,144,168,0.15); }
.stat-anterior { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
body.tema-claro .stat-delta.delta-mas-costo { color: #a35f00; background: rgba(245,166,35,0.2); }
body.tema-claro .stat-delta.delta-menos-costo { color: #0d7a4d; background: rgba(62,207,142,0.2); }
body.tema-claro .stat-delta.delta-neutro { color: #0f766e; }

/* ── Pendientes: una sola voz de color (el acento del panel) ──
   Tarjetas planas, sin degrade ni borde de color por seccion, sin cajas verdes;
   el color queda solo para lo que informa (contador, aprobar, puntito de estado). */
#tab-pendientes .seccion-pendiente {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; margin-bottom: 16px;
}
#tab-pendientes .seccion-pendiente h3 { font-size: 15px; font-weight: 600; margin: 0 0 14px; color: var(--text); }
#tab-pendientes .seccion-sub { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-muted); }
#tab-pendientes .badge-count { background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 9px; }
#tab-pendientes .vacio-ok {
  background: none; border: 0; padding: 0; gap: 8px;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
}
#tab-pendientes .vacio-ok svg { flex-shrink: 0; opacity: 0.8; }
#tab-pendientes .historial-mini-estado { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text-muted); }
#tab-pendientes .historial-mini-estado .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
#tab-pendientes .historial-mini-estado.rechazada .punto { background: var(--danger); }
#tab-pendientes .historial-mini-estado.aprobada, #tab-pendientes .historial-mini-estado.rechazada { color: var(--text-muted); }
#tab-pendientes .card {
  background: var(--surface2); border: 1px solid var(--border); box-shadow: none;
}
#tab-pendientes .card:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
#tab-pendientes .btn-ok { background: var(--accent); color: #fff; box-shadow: none; }
#tab-pendientes .btn-ok:hover { background: var(--accent-hover); }
#tab-pendientes .btn-danger { background: transparent; color: var(--text-muted); border: 1px solid var(--border); box-shadow: none; }
#tab-pendientes .btn-danger:hover { color: var(--danger); border-color: var(--danger); }

/* ── Estadisticas: barras y columnas con una sola familia de color ── */
.est-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; }
.est-leyenda { display: flex; gap: 18px; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.est-leyenda .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* 50% en teal, 100% en ambar: dos colores claramente distintos (el 100% es el que mas cuesta) */
.sw50, .seg50 { background: #14b8a6; }
.sw100, .seg100 { background: #f5a623; }
body.tema-claro .sw50, body.tema-claro .seg50 { background: #0f9488; }
body.tema-claro .sw100, body.tema-claro .seg100 { background: #e08e00; }
.est-fila { display: grid; grid-template-columns: 190px 1fr 130px; align-items: center; gap: 14px; padding: 7px 0; }
.est-nombre { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 600; }
.est-sector { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.est-barra { display: flex; height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.est-barra span { display: block; height: 100%; }
.est-valor { text-align: right; font-size: 14px; font-weight: 700; white-space: nowrap; }
.est-detalle { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.est-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.est-total b { color: var(--text); }
.est-evo { display: flex; align-items: flex-end; gap: 14px; }
.est-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; opacity: 0.55; }
.est-col.activa { opacity: 1; }
.est-col-valor { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.est-col-plot { height: 130px; width: 100%; max-width: 64px; display: flex; align-items: flex-end; }
.est-col-pila { width: 100%; display: flex; flex-direction: column; border-radius: 6px 6px 0 0; overflow: hidden; min-height: 2px; }
.est-col-label { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) {
  .est-fila { grid-template-columns: 1fr 100px; }
  .est-fila .est-barra { grid-column: 1 / -1; order: 3; }
}

  /* ── Estilo del video promocional (header, pestañas arriba, Resumen en tarjetas) ── */
  body:has(#app:not([style*="none"]))::before,
  body:has(#app:not([style*="none"]))::after { display: none; }
  main { max-width: 1240px; padding: 20px 24px 40px; }
  header {
    height: 62px; padding: 0 24px; background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .header-logo-badge { height: 40px; }
  .header-logo-badge img { height: 36px; }
  header h1 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-body); }
  header h1 b { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; }
  header h1 span { color: var(--text-muted); font-size: 15px; font-weight: 400; }
  .header-rol { font-size: 14px; color: var(--text-muted); margin-right: 2px; }
  .perfil-avatar-header { width: 32px; height: 32px; font-size: 13px; background: var(--accent); }

  .tab-badge {
    font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; box-sizing: border-box;
    background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center;
  }

  @media (min-width: 900px) {
    #hamburguesa-btn, #sidebar-edge-hover, #sidebar-overlay, #sidebar .sidebar-titulo { display: none !important; }
    #sidebar {
      position: sticky; top: 62px; bottom: auto; left: auto; z-index: 29; width: auto;
      transform: none; transition: none; flex-direction: row; gap: 4px; padding: 0 20px;
      background: var(--bg); border-right: 0; border-bottom: 1px solid var(--border);
      box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
      overflow-x: auto; scrollbar-width: none;
    }
    #sidebar::-webkit-scrollbar { display: none; }
    #sidebar button.tab-btn {
      display: flex; align-items: center; gap: 6px; white-space: nowrap;
      padding: 13px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
      font-size: 14px; font-weight: 600; letter-spacing: normal; color: var(--text-muted);
      background: none; box-shadow: none;
    }
    #sidebar button.tab-btn:hover { transform: none; letter-spacing: normal; background: none; color: var(--text); }
    #sidebar button.tab-btn.activo {
      color: var(--text); font-weight: 600; background: none; box-shadow: none;
      border-bottom-color: var(--accent-2);
    }
  }

  .pn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 16px; }
  .pn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .pc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; min-width: 0; }
  .pc h3 { margin: 0 0 12px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: normal; color: var(--text); }
  .pc-periodo { margin-top: 16px; }
  .span2 { grid-column: span 2; }
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kpi { padding: 12px 14px; border-radius: 12px; background: var(--surface2); }
  .kpi b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--accent-2); }
  .kpi b.w { color: var(--warn); }
  .kpi span { font-size: 13px; color: var(--text-muted); }
  .li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
  .li:first-child { border-top: 0; }
  .li small { color: var(--text-muted); font-size: 13px; text-align: right; }
  .li-nombre { display: flex; gap: 8px; align-items: center; }
  .li-mas { justify-content: flex-start; }
  .dotw, .doto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .dotw { background: var(--warn); }
  .doto { background: var(--ok); }
  .pill { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .pill.t { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }
  .pill.w { background: rgba(245,166,35,.14); color: var(--warn); }
  .pill.o { background: rgba(62,207,142,.14); color: var(--ok); }
  .vacio-chico { padding: 8px 0; text-align: left; font-size: 13.5px; }
  .pc .turno-hoy-grid { margin-bottom: 0; }

  @media (max-width: 900px) {
    header { padding: 0 10px; }
    header h1 b { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    header .header-left { flex: 1; min-width: 0; }
    header h1 { min-width: 0; overflow: hidden; }
    .header-acciones { flex: none; }
    .header-logo-badge { display: none; }
    header .header-left, .header-acciones { gap: 8px; }
    header h1 span { display: none; }
    .header-rol { display: none; }
    .pn-grid, .pn-grid-2 { grid-template-columns: 1fr; }
    .span2 { grid-column: auto; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── Horas del período (tabla + pendientes, como el video) ── */
  .pn-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
  .pc-tabla { padding: 6px 8px 4px; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
  .tbl th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); background: none; }
  .tbl td { padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
  .tbl td:first-child { font-weight: 600; }
  .tbl td:first-child a { color: var(--text); text-decoration: none; }
  .tbl td:first-child a:hover { color: var(--accent-2); }
  .tbl .sec td { padding-top: 14px; font-weight: 700; color: var(--text-muted); font-size: 13px; letter-spacing: .06em; border-bottom: 0; }
  .tbl .tot td { font-weight: 700; color: var(--accent-2); border-bottom: 0; }
  .tbl tr.flash td { animation: flashBg 1.8s ease both; }
  @keyframes flashBg { 0% { background: transparent; } 15% { background: color-mix(in srgb, var(--accent-2) 20%, transparent); } 100% { background: transparent; } }
  .pend h3 { display: flex; align-items: center; gap: 8px; }
  .pi { padding: 12px 0; border-top: 1px solid var(--border); }
  .pi:first-child { border-top: 0; }
  .pi .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
  .pi .n { font-size: 15px; font-weight: 600; margin-top: 3px; }
  .pi .d { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
  .acts { display: flex; gap: 8px; margin-top: 10px; }
  .acts .bt { padding: 8px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; font-family: var(--font-body); }
  .acts .bt-ok { background: var(--accent); color: #fff; }
  .acts .bt-ok:hover { background: var(--accent-hover); }
  .acts .bt-no { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }
  .acts .bt-no:hover { color: var(--text); }
  .acts .bt:disabled { opacity: .5; cursor: default; }
  .pi-estado { margin-top: 10px; font-size: 13.5px; font-weight: 700; }
  .pi-estado.ok { color: var(--ok); }
  .pi-estado.no { color: var(--danger); }
  @media (max-width: 900px) { .pn-two { grid-template-columns: 1fr; } }
  .pc-tabla .tabla-scroll { border: 0; background: none; border-radius: 0; box-shadow: none; }
  .tbl tbody tr td, .tbl tbody tr:nth-child(even) td { background: none; }
  .tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface2) 60%, transparent); }
  .tbl tbody tr.sec:hover td, .tbl tbody tr.tot:hover td { background: none; }
  table.tbl { background: none; border: 0; box-shadow: none; margin-bottom: 0; border-radius: 0; }
  .tbl tbody tr, .tbl tbody tr:nth-child(even) { background: none; }
  .tbl tbody tr:hover { background: color-mix(in srgb, var(--surface2) 60%, transparent); }
  .tbl tbody tr.sec:hover, .tbl tbody tr.tot:hover { background: none; }
  .tbl tbody tr:last-child td { border-bottom: 0; }

  /* El login es siempre oscuro (foto del edificio + vidrio oscuro), aunque el
     panel este en modo claro -- si no, en modo claro el titulo y el logo
     quedaban oscuros sobre el cuadro oscuro y el fondo se fundia a blanco. */
  #login-screen {
    --bg: #0a0c12; --surface2: #171b28; --border: #242a3b;
    --text: #eef0f6; --text-muted: #8b90a8;
    color: var(--text);
  }
  body.tema-claro #login-screen .login-logo { filter: none; }

  /* ── En turno ahora (EN VIVO) ── */
  .envivo { margin-top: 16px; }
  .ev-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .ev-top h3 { margin: 0; font-size: 16px; }
  .ev-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 9px; border-radius: 999px; background: rgba(255,77,94,.12); color: #ff4d5e; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; }
  .ev-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d5e; animation: evPulso 1.6s infinite; }
  @keyframes evPulso { 0% { box-shadow: 0 0 0 0 rgba(255,77,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,77,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); } }
  .ev-hora { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-muted); }
  .ev-hora b { color: var(--text); }
  .ev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .ev-col h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--text-muted); text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
  .ev-col h4 span { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .ev-p { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }
  .ev-p:first-child { border-top: 0; }
  .ev-av { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; }
  .ev-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ok); }
  .ev-av.off::after { background: var(--warn); }
  .ev-nm { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-tr { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
  .ev-bar { height: 4px; border-radius: 4px; background: var(--surface2); margin-top: 7px; overflow: hidden; }
  .ev-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .ev-st { text-align: right; }
  .ev-st small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 5px; }
  .ev-foot { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); }
  .ev-foot b { color: var(--text); font-weight: 600; }
  .ev-foot:not(:has(div:not(:empty))) { display: none; }
  .ev-proximo { margin-left: auto; }
  .ev-k { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); opacity: .75; margin-right: 8px; }
  @media (max-width: 900px) {
    .ev-cols { grid-template-columns: 1fr; }
    .ev-top { flex-wrap: wrap; row-gap: 6px; }
    .ev-top h3, .ev-live { white-space: nowrap; }
    .ev-hora { font-size: 12px; margin-left: 0; width: 100%; }
    .ev-proximo { margin-left: 0; }
  }
  .ev-sub { margin: 14px 0 2px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
  .ev-fin { padding: 8px 0; opacity: .75; }
  .ev-fin + .ev-fin { border-top: 1px solid var(--border); }
  .ev-sub + .ev-fin { border-top: 0; }
  .ev-av.chico { width: 32px; height: 32px; font-size: 13px; margin-left: 4px; }
  .ev-av.chico::after { display: none; }
  .ev-fin .ev-nm { font-size: 14px; }
  .pill.g { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
  .ev-proximo { margin-left: 0; }
  /* Horas extra en vivo */
  .pill.x { background: rgba(176,124,255,.16); color: #b98cff; }
  .ev-av.extra::after { background: #b98cff; }
  .ev-bar.extra { background: rgba(176,124,255,.18); }
  .ev-bar.extra i { width: 100% !important; background: linear-gradient(90deg, var(--accent-2), #b98cff); }
  .ev-extra .ev-st small { color: #b98cff; opacity: .85; }
  .ev-cuenta-extra { color: #b98cff; }
  .ev-st small.ev-extra-txt { color: #b98cff; font-weight: 600; }

/* Deuda de horas (regla de 44hs) en Fichadas por empleado */
.aviso-deuda { margin: 4px 0 12px; padding: 10px 14px; border-radius: 8px; border-left: 4px solid var(--warn); background: rgba(245,166,35,0.10); font-size: 14px; }
.aviso-deuda.saldada { border-left-color: var(--ok); background: rgba(62,207,142,0.08); }
.aviso-deuda ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; }

/* Fila de totales en Fichadas por empleado */
.fila-total td { font-weight: 700; border-top: 2px solid var(--text-muted); }
/* Fichadas por empleado: tabla sobria, sin fondos de color en las filas.
   Las etiquetas (avance del sabado, deuda, avisos) son chips neutros con
   borde fino; solo el texto lleva un toque de color cuando hace falta. */
.tabla-fichadas td, .tabla-fichadas th { padding: 9px 12px; }
.tabla-fichadas .num { text-align: right; font-variant-numeric: tabular-nums; width: 52px; }
.tabla-fichadas .cero { color: var(--text-muted); opacity: .55; }
.tabla-fichadas .col-fecha { white-space: nowrap; }
.tabla-fichadas .col-hora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-fichadas .col-obs { line-height: 1.9; }
.tabla-fichadas .estado-dia { color: var(--text-muted); font-size: 13px; }
.tabla-fichadas .estado-dia.ausente { color: var(--danger); font-weight: 600; }
.tabla-fichadas .tarde-chico { color: var(--text-muted); font-size: 11.5px; margin-left: 4px; }
.tabla-fichadas .hora-tarde { color: #f3d675; background: rgba(243,214,117,0.13); border-radius: 5px; padding: 1px 6px; margin-left: -6px; }
body.tema-claro .tabla-fichadas .hora-tarde { color: #8a6500; background: rgba(243,200,60,0.22); }
.tabla-fichadas .hora-tarde + .tarde-chico { color: #c9b25f; }
body.tema-claro .tabla-fichadas .hora-tarde + .tarde-chico { color: #8a6500; }
.pill-sabado, .chip-obs { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  white-space: nowrap; color: var(--text-muted); background: none; border: 1px solid var(--border); line-height: 20px; }
.pill-sabado.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.pill-sabado.falta, .chip-obs.aviso { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
/* Banco de horas (Fichadas por empleado) */
.banco-horas { border: 1px solid var(--border); border-radius: 10px; margin: 14px 0; font-size: 13px; }
.banco-horas summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.banco-horas summary::-webkit-details-marker { display: none; }
.banco-horas summary::after { content: "▾"; margin-left: auto; color: var(--text-muted); transition: transform .15s; }
.banco-horas details:not([open]) summary::after { transform: rotate(-90deg); }
.banco-sub { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.banco-estado { font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); line-height: 20px; white-space: nowrap; }
.banco-estado.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.banco-estado.debe { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.banco-lista { border-top: 1px solid var(--border); }
.banco-fila { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.banco-semana { white-space: nowrap; }
.banco-semana .banco-sub { display: block; margin: 0; }
.banco-flecha { color: var(--text-muted); margin: 0 4px; }
.banco-nota { color: var(--text-muted); font-size: 12px; padding: 8px 14px 10px; }
@media (max-width: 640px) { .banco-fila { grid-template-columns: minmax(0, 1fr) auto; } .banco-detalle { grid-column: 1 / -1; grid-row: 2; } }
.link-banco { color: inherit; text-decoration: underline; }
.btn-icono-pdf { background: transparent; border: 1px solid var(--border); padding: 5px 8px; line-height: 0; }
.btn-icono-pdf:hover { background: var(--surface2); }
.dia-semana { display: inline-block; min-width: 2.4em; color: var(--text-muted); font-weight: 600; }

/* Cuadro de horas adeudadas (Fichadas por empleado) */
.cuadro-deudores { margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(127,127,127,0.25); border-radius: 10px; }
.cuadro-deudores:empty { display: none; }
.cuadro-deudores-titulo { font-weight: 700; margin-bottom: 8px; }
.deudor { padding: 6px 0; border-top: 1px solid rgba(127,127,127,0.15); }
.deudor summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge-deuda { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--warn); background: rgba(245,166,35,0.15); }
.badge-deuda.saldada { color: var(--ok); background: rgba(62,207,142,0.12); }
.btn-link { margin-left: auto; background: none; border: none; color: var(--accent, inherit); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.tabla-movimientos { width: 100%; margin-top: 8px; font-size: 13px; border-collapse: collapse; }
.tabla-movimientos th, .tabla-movimientos td { padding: 4px 8px; text-align: left; }
.deudor summary { list-style: none; }
.deudor summary::-webkit-details-marker { display: none; }
.deudor summary::before { content: "▸"; color: var(--text-muted); transition: transform .15s; }
.deudor[open] summary::before { transform: rotate(90deg); }