/* =====================================================================

   INOUT Panel Web — V3.24 Workers search + scroll list

   Tokens from INOUT Design System (colors_and_type.css).

   All existing class names preserved — only visuals updated.

   ===================================================================== */



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');



/* ── Design System Tokens ─────────────────────────────────────────── */

:root {

  /* Brand */

  --io-ink:           #172033;

  --io-ink-2:         #0f172a;

  --io-cyan:          #0891b2;

  --io-sky:           #0ea5e9;

  --io-sky-soft:      #38bdf8;

  --io-indigo:        #4f46e5;

  --io-indigo-2:      #6366f1;



  /* Neutrals */

  --bg:               #f2f6fc;

  --bg-soft:          #eef3f8;

  --surface:          #ffffff;

  --surface-soft:     #f7f9fc;

  --surface-tint:     #eef5ff;

  --line:             #dbe4ee;

  --line-strong:      #c6d2df;



  /* Foreground */

  --fg-1:             #172033;

  --fg-2:             #334155;

  --fg-3:             #617086;

  --fg-4:             #94a3b8;



  /* Semantic */

  --green:            #0f9f7a;

  --green-bright:     #38ef7d;

  --green-soft:       #e8f8f3;

  --green-ink:        #067267;



  --amber:            #c98716;

  --amber-soft:       #fff6df;

  --amber-ink:        #7a4d00;



  --red:              #d84848;

  --red-soft:         #fff0f0;

  --red-ink:          #9b2e28;



  --blue:             #2563eb;

  --blue-soft:        #e9f0ff;

  --blue-ink:         #1747af;



  /* Gradients */

  --grad-brand:       linear-gradient(135deg, #172033 0%, #0891b2 52%, #0ea5e9 100%);

  --grad-sidebar:     linear-gradient(180deg, #5fa8ff 0%, #347df2 44%, #1f55ce 100%);

  --grad-hero:        linear-gradient(135deg, #111827 0%, #1d4ed8 100%);

  --grad-cta:         linear-gradient(135deg, #4f46e5, #6366f1);

  --grad-segment:     linear-gradient(90deg, #2563eb, #00dfd8);



  /* Radius */

  --r-xs:  6px;

  --r-sm:  8px;

  --r-md:  12px;

  --r-lg:  14px;

  --r-xl:  18px;

  --r-2xl: 24px;

  --r-pill: 999px;



  /* Spacing */

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;

  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;



  /* Shadows */

  --shadow-1: 0 1px 0 rgba(255,255,255,0.86);

  --shadow-2: 0 10px 24px rgba(21,32,51,0.08);

  --shadow-3: 0 16px 40px rgba(23,32,51,0.08);

  --shadow-4: 0 18px 42px rgba(21,32,51,0.12);

  --shadow-hero: 0 18px 42px rgba(29,78,216,0.22);

  --shadow-cta:  0 4px 16px rgba(79,70,229,0.35);

  --shadow-cta-hover: 0 8px 24px rgba(79,70,229,0.45);

  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.12);



  /* Motion */

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast:  140ms;

  --dur-base:  220ms;

  --dur-slow:  360ms;



  /* Typography */

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;



  /* ── Compatibility aliases (keep old variable names working) ── */

  --text:         var(--fg-1);

  --muted:        var(--fg-3);

  --cyan:         var(--io-cyan);

  --shadow:       var(--shadow-3);

  --ink:          var(--fg-1);

  --accent:       var(--blue);

  --accent-light: var(--blue-soft);

}



/* ── Reset ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }



body {

  margin: 0;

  min-height: 100vh;

  background: var(--bg);

  color: var(--fg-1);

  font-family: var(--font-sans);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

  overflow-x: hidden;

}



#bgCanvas {

  position: fixed; inset: 0; width: 100%; height: 100%;

  z-index: -1; pointer-events: none;

}

/* V66: ambientación solo del login -- apagada del todo dentro del panel */

body.app-activa #bgCanvas { display: none; }



button, input, select { font: inherit; color: inherit; }

button { cursor: pointer; }

.hidden { display: none !important; }



/* ── Loading overlay ──────────────────────────────────────────────── */

.boot-screen, .app-loading {

  position: fixed; inset: 0; z-index: 1000;

  display: grid; place-items: center; padding: 24px;

  background:

    radial-gradient(circle at 18% 18%, rgba(59,130,246,.15), transparent 34%),

    radial-gradient(circle at 82% 78%, rgba(6,182,212,.12), transparent 32%),

    linear-gradient(145deg, #eef4ff 0%, #f8fbff 52%, #edf7fb 100%);

  transition: opacity .22s ease, visibility .22s ease;

}

.boot-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-card, .app-loading-card {

  width: min(390px, 92vw); display: grid; gap: 10px; padding: 28px 30px;

  border: 1px solid rgba(148,163,184,.28); border-radius: 22px;

  background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(15,23,42,.14);

  text-align: left; backdrop-filter: blur(12px);

}

.boot-brand { display:flex; align-items:center; gap:10px; color:#182753; font-size:22px; font-weight:900; letter-spacing:-.6px; }

.boot-brand.compact { justify-content:center; font-size:18px; }

.boot-logo { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#10234f; font-size:14px; font-weight:950; background:linear-gradient(135deg,#e8fbff,#74d4ff); box-shadow:0 10px 24px rgba(37,99,235,.18); }

.boot-brand.compact .boot-logo { width:34px; height:34px; border-radius:10px; }

.boot-card strong, .app-loading-card strong { color:#0f172a; font-size:19px; font-weight:850; }

.boot-card > span, .app-loading-card > span { color:#52627b; font-size:14px; line-height:1.45; }

.boot-card small, .app-loading-card small { color:#8491a6; font-size:12px; }

.app-loading { z-index: 900; background: rgba(242,246,252,.80); backdrop-filter: blur(8px); }

.app-loading-card { width:min(330px,90vw); text-align:center; }

.boot-progress { height:7px; overflow:hidden; border-radius:999px; background:#e6edf7; }

.boot-progress i { display:block; width:12%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#243c91,#3b82f6,#22c7dd); transition:width .28s ease; }

.app.loading .sidebar, .app.loading .content {

  opacity: .18; filter: blur(1px); pointer-events:none;

  transition: opacity .18s ease, filter .18s ease;

}

@media (prefers-reduced-motion: reduce) { .boot-screen, .boot-progress i { transition:none; } }



/* ── LOGIN ────────────────────────────────────────────────────────── */

.login-view { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }



.login-brand-panel {

  position: relative; display: flex; flex-direction: column;

  justify-content: space-between; padding: 52px 48px;

  background:

    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(99,102,241,0.4) 0%, transparent 60%),

    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(6,182,212,0.3) 0%, transparent 55%),

    linear-gradient(160deg, #0f172a 0%, #1e1b4b 55%, #0c2541 100%);

  color: #fff; overflow: hidden;

}

.login-brand-panel::before {

  content: ""; position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 0);

  background-size: 32px 32px; pointer-events: none;

}

.login-brand-top, .login-brand-center, .login-brand-bottom { position: relative; z-index: 1; }

.login-brand-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.login-brand-logo {

  width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;

  background: linear-gradient(135deg, #ffffff 0%, #9ee7ff 45%, #65d9ff 100%);

  font-size: 14px; font-weight: 900; color: #0f172a;

  box-shadow: 0 14px 34px rgba(6,182,212,0.28); flex-shrink: 0;

}

.login-brand-name {

  font-size: 31px; font-weight: 950; line-height: 1;

  background: linear-gradient(135deg, #ffffff 0%, #a7f3ff 45%, #38bdf8 100%);

  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

}

.login-brand-tagline { margin-top: 8px; font-size: 14px; color: rgba(148,163,184,0.85); line-height: 1.5; max-width: 280px; }

.login-brand-center { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; }

.login-brand-headline {

  font-size: clamp(30px, 3.5vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -1.5px;

  background: linear-gradient(135deg, #fff 30%, rgba(148,163,255,0.7));

  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

}

.login-brand-features { display: grid; gap: 12px; }

.login-brand-feature { display: flex; gap: 10px; align-items: center; color: rgba(196,207,255,0.75); font-size: 13px; }

.login-brand-feature::before {

  content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--r-pill);

  background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.8);

}

.login-brand-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(148,163,184,0.6); font-size: 12px; }



.login-form-panel { display: grid; place-items: center; background: #f8fafc; padding: 48px 40px; }

.login-card { width: min(360px, 100%); display: grid; gap: 20px; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }

.login-form-header { display: grid; gap: 6px; margin-bottom: 4px; }

.login-form-header h1 { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.6px; line-height: 1.1; }

.login-form-header p { color: #64748b; font-size: 14px; }



@media (max-width: 700px) {

  /* V66: antes se ocultaba entero el panel de marca (fondo oscuro con

     degradado) y solo quedaba el formulario en blanco -- "se ve muy gris el

     fondo" en iPhone. Ahora se deja una cabecera compacta con el mismo

     degradado (logo + nombre + frase), y solo se recorta la parte larga

     (titular grande + lista de características) para no alargar la página. */

  .login-view { grid-template-columns: 1fr; }

  .login-brand-panel { min-height: auto; padding: 28px 24px 22px; }

  .login-brand-center, .login-brand-bottom { display: none; }

  .login-form-panel { background: #fff; padding: 40px 24px 48px; }

}



.brand-mark {

  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;

  background: linear-gradient(135deg, #111827, #0891b2); color: #fff; font-weight: 950;

  box-shadow: 0 12px 28px rgba(8,145,178,0.22);

}

.brand-mark.small { width: 36px; height: 36px; }



h1, h2, p { margin: 0; }

h1 { font-size: 24px; line-height: 1.15; font-weight: 800; }

h2 { font-size: 16px; line-height: 1.2; font-weight: 700; }

p, small { color: var(--fg-3); }

label { display: grid; gap: 6px; color: var(--fg-3); font-size: 13px; font-weight: 600; }



input, select {

  height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm);

  background: #fff; color: var(--fg-1); padding: 0 12px;

  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); outline: none;

}

input:focus, select:focus { border-color: var(--io-indigo); box-shadow: 0 0 0 4px rgba(99,102,241,0.12); }

input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0; accent-color: var(--blue); }



.checkbox-label { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--fg-3); }

.checkbox-label span { line-height: 1.25; }



button {

  height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm);

  background: var(--surface-soft); color: var(--fg-1); font-weight: 600;

  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);

}



.login-card button[type=submit] {

  height: 52px; border: none; border-radius: var(--r-lg);

  background: var(--grad-cta); color: #fff; font-size: 15px; font-weight: 700;

  box-shadow: var(--shadow-cta);

}

.login-card button[type=submit]:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }

.login-card input {

  height: 48px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--r-md);

  color: #0f172a; padding: 0 16px; font-size: 15px;

}

.login-card input:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.12); }

.login-card label span { color: #374151; font-size: 13px; font-weight: 600; }

.login-card small { color: #94a3b8; font-size: 12px; text-align: center; line-height: 1.4; }

.login-notice {

  border: 1px solid #fecaca; background: #fef2f2; color: #991b1b;

  border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; font-weight: 650; line-height: 1.35;

}



/* V67 (4): excluido .pe-accordion-toggle -- el acordeon de "Ajustes de

   empresa" vive dentro de un .form-panel (a diferencia del de Administrar)

   y esta regla generica le pintaba fondo oscuro + texto blanco por encima

   de su propio estilo, dejando el titulo del mismo color que el fondo. */

.form-panel button:not(.secondary-button):not(.icon-btn):not(.pe-accordion-toggle):not(.pe-worker-row-btn):not(.difusion-filtros-btn):not(.obra-combo-trigger):not(.obra-combo-popover button):not(.plantilla-enviar-chip):not(.pe-tab-btn):not(.link-button) { border-color: var(--fg-1); background: var(--fg-1); color: #fff; }

.secondary-button { border-color: #9bb4d6; background: #eef5ff; color: #1742b7; }



/* ── APP SHELL ────────────────────────────────────────────────────── */

.app { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }

/* V143: "abrir en ventana aparte" (Resumen partes) -- oculta la barra
   lateral para que la tabla tenga todo el ancho de la ventana nueva. Con
   !important porque .content/.app se redeclaran varias veces más abajo
   para otros breakpoints y necesitamos ganar siempre, sin depender de en
   qué orden caigan esas reglas. */
body.modo-enfoque-v143 .sidebar { display: none !important; }
body.modo-enfoque-v143 .app { grid-template-columns: 1fr !important; }
body.modo-enfoque-v143 .content { width: 100% !important; max-width: 100% !important; }

/* V145: la ventana independiente de «Resumen partes» debe aprovechar todo
   el ancho disponible. En pantallas grandes quedaba limitada por los topes
   globales de .app (1780px) y .content (1500px), dejando mucho espacio vacío
   a ambos lados y haciendo que la tabla pareciera demasiado estrecha. */
body.modo-enfoque-v143 .app {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.modo-enfoque-v143 .content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* V146: el ancho debe adaptarse al ordenador que abre la ventana. Las
   reglas generales de .section y de las pantallas no-Hoy podían volver a
   imponer --panel-max (1540px) después del ajuste anterior. */
body.modo-enfoque-v143 .content > section.section,
body.modo-enfoque-v143 .content section.section,
body.modo-enfoque-v143 .section,
body.modo-enfoque-v143 #partesSection {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.modo-enfoque-v143 #partesSection .partes-table-panel,
body.modo-enfoque-v143 #partesSection .partes-table-wrap {
  width: 100% !important;
  max-width: none !important;
}

/* V147: anclaje real al viewport. En algunos navegadores la ventana nueva
   conserva el ancho del contenedor padre y deja la sección pegada a la
   izquierda, aunque la tabla ya no tenga max-width. La vista independiente
   se define aquí respecto al viewport completo y con caja centrada. */
html:has(body.modo-enfoque-v143),
body.modo-enfoque-v143 {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body.modo-enfoque-v143 #appView {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}
body.modo-enfoque-v143 #appView > .content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 12px 16px 24px !important;
}
body.modo-enfoque-v143 #partesSection {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}



/* ── SIDEBAR ──────────────────────────────────────────────────────── */

.sidebar {

  position: sticky; top: 0; height: 100vh;

  display: flex; flex-direction: column;

  gap: 20px; padding: 20px 16px; color: #fff;

  background:

    radial-gradient(circle at 20% 8%, rgba(190,232,255,0.72), transparent 32%),

    radial-gradient(circle at 92% 12%, rgba(89,236,225,0.42), transparent 28%),

    var(--grad-sidebar);

  box-shadow: 14px 0 36px rgba(29,78,216,0.22);

  overflow: hidden; position: relative;

}

.sidebar::before {

  content: ""; position: absolute; inset: 0; pointer-events: none;

  background:

    linear-gradient(135deg, rgba(255,255,255,0.26), transparent 38%),

    linear-gradient(0deg, rgba(12,26,84,0.1), transparent 52%);

}

.sidebar-head { position: relative; display: flex; gap: 10px; align-items: center; z-index: 1; flex: 0 0 auto; }

.sidebar-head strong { font-size: 17px; font-weight: 900; letter-spacing: -0.2px; }

.sidebar-head span, .sidebar-note span { display: block; color: rgba(232,240,255,0.78); font-size: 12px; margin-top: 2px; }

.nav { position: relative; display: grid; gap: 7px; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.nav-item, .logout {

  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.11);

  color: rgba(255,255,255,0.92); text-align: left; padding: 0 14px;

  border-radius: 10px; height: 42px; font-size: 13px; font-weight: 700;

  backdrop-filter: blur(10px); box-shadow: var(--shadow-inset);

  transition: background var(--dur-fast);

}

.nav-item.active {

  background: rgba(255,255,255,0.28); color: #fff; border-color: rgba(255,255,255,0.46);

  box-shadow: inset 4px 0 0 rgba(255,255,255,0.82), 0 12px 26px rgba(17,63,164,0.2);

}

.nav-item:hover, .logout:hover { background: rgba(255,255,255,0.18); color: #fff; transform: none; }

.sidebar-note {

  position: relative; margin-top: auto; flex: 0 0 auto; padding: 12px;

  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-sm);

  background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); z-index: 1;

}

.sidebar-note small { display: block; margin-top: 3px; color: rgba(232,240,255,0.72); font-size: 12px; font-weight: 700; }

.logout { position: relative; z-index: 1; text-align: center; flex: 0 0 auto; }



/* ── CONTENT ──────────────────────────────────────────────────────── */

.content { width: min(1480px, calc(100vw - 250px)); max-width: 100%; padding: 22px; }



/* ── SHARED SURFACE STYLES ────────────────────────────────────────── */

.topbar, .controls, .summary-grid, .panel, .details > article, .form-panel, .list-panel {

  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);

}

.topbar {

  display: flex; justify-content: space-between; gap: 20px; align-items: center;

  padding: 18px 20px; border-radius: var(--r-lg); backdrop-filter: blur(10px);

}

.top-actions { display: flex; gap: 10px; align-items: center; }

.top-actions button {

  min-width: 86px; border-color: var(--fg-1); background: var(--fg-1); color: #fff;

  border-radius: var(--r-sm); height: 40px; font-size: 13px; font-weight: 700;

}

.top-actions button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

.import-control {

  position: relative; display: inline-flex; align-items: center; justify-content: center;

  min-width: 100%; height: 40px; padding: 0 16px; border-radius: var(--r-sm);

  border: 1px dashed #9bb4d6; background: #eef5ff; color: #1742b7;

  cursor: pointer; overflow: hidden; font-weight: 700; font-size: 13px;

}

.import-control input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

#vacationJustificante::file-selector-button,

#vacationJustificante::-webkit-file-upload-button {

  margin-right: 10px; padding: 8px 14px; border-radius: var(--r-sm);

  border: 1px solid #9bb4d6; background: #eef5ff; color: #1742b7;

  font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .15s, box-shadow .15s;

}

#vacationJustificante:hover::file-selector-button,

#vacationJustificante:hover::-webkit-file-upload-button {

  transform: translateY(-1px); box-shadow: var(--shadow-2);

}

.notice { margin-top: 14px; padding: 12px 14px; border: 1px solid #e8d39a; background: #fff7df; border-radius: var(--r-sm); color: #72520d; }



.section { display: none; }

.section.active { display: block; }



/* ── TODAY ────────────────────────────────────────────────────────── */

.today-head {

  display: flex; justify-content: space-between; gap: 16px; align-items: center;

  margin-top: 16px; padding: 16px 20px;

  border: 1px solid var(--line); border-radius: var(--r-lg);

  background: var(--surface); box-shadow: var(--shadow-3);

}

.today-head p { margin-top: 4px; }

.today-summary { margin-top: 16px; }

.clickable-metric, .today-group { cursor: pointer; }

.clickable-metric.active, .today-group:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.today-panel { margin-top: 16px; }

.today-filterbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 0 14px; box-sizing: border-box; }

.today-filterbar label { flex: 1; max-width: 460px; }

.today-filter-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-right: 2px; }

.filter-pill { min-width: 90px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--blue-soft); color: var(--blue-ink); font-weight: 800; text-align: center; border: 1px solid #cddcff; }

.today-overview, .stats-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 16px; margin-top: 16px; }

.compact-panel .panel-head { padding: 14px 16px; }

.compact-panel .panel-head > div { display: grid; gap: 4px; }

.compact-panel .panel-head p { max-width: 540px; font-size: 13px; line-height: 1.35; }

.today-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 14px; }

.today-group {

  display: grid; gap: 12px; min-height: 98px; padding: 12px;

  border: 1px solid var(--line); border-radius: var(--r-md);

  background: linear-gradient(180deg, #fff, #f8fbff);

  transition: transform var(--dur-fast), box-shadow var(--dur-fast);

}

.today-group:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.today-group.working { border-left: 5px solid var(--green); }

.today-group.closed  { border-left: 5px solid var(--blue); }

.today-group.missing { border-left: 5px solid var(--red); }

.today-group.vacation{ border-left: 5px solid var(--io-cyan); }

.today-group.docs    { border-left: 5px solid var(--io-sky); }

.today-group-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }

.today-group-head b { font-size: 22px; font-weight: 900; letter-spacing: -0.4px; }

.avatar-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.avatar-line span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue-ink); font-size: 12px; font-weight: 900; }

.avatar-line em { color: var(--fg-3); font-size: 12px; font-style: normal; }

.activity-timeline { display: grid; gap: 4px; padding: 12px 16px; max-height: 330px; overflow-y: auto; overscroll-behavior: contain; }

.activity-item { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }

.activity-item:last-child { border-bottom: 0; }

.activity-item time { color: var(--fg-3); font-size: 12px; font-family: var(--font-mono); }

.activity-item strong, .activity-item span { display: block; }

.activity-item strong { font-size: 13px; font-weight: 700; }

.activity-item span { margin-top: 2px; color: var(--fg-3); font-size: 12px; }

.today-workers { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; padding: 14px; }

.today-worker-card {

  position: relative; display: grid; gap: 10px; padding: 14px;

  border: 1px solid var(--line); border-left: 5px solid var(--fg-4);

  border-radius: var(--r-md); background: #fff; overflow: hidden;

  transition: transform var(--dur-fast), box-shadow var(--dur-fast);

}

.today-worker-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

.today-worker-card.ok      { border-left-color: var(--green); }

.today-worker-card.open    { border-left-color: var(--amber); }

.today-worker-card.vacation{ border-left-color: var(--io-cyan); }

.today-worker-card.missing { border-left-color: var(--red); }

.today-worker-head, .today-status-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

.today-worker-head span, .today-status-line span, .today-worker-detail { color: var(--fg-3); font-size: 12px; }

.today-worker-head button { min-width: 78px; height: 34px; background: var(--blue-soft); border-color: #cddcff; color: var(--blue-ink); border-radius: var(--r-sm); font-size: 12px; font-weight: 700; }

.today-mini-timeline { min-width: 0; }

.today-mini-timeline .timeline { height: 20px; }

.today-worker-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.justificante-badge, .justificante-inline {

  display: inline-flex; align-items: center; width: fit-content; padding: 2px 7px;

  border-radius: var(--r-pill); background: var(--green-soft); color: var(--green-ink);

  font-size: 11px; font-style: normal; font-weight: 800;

}

.justificante-badge { position: absolute; right: 12px; bottom: 10px; }



/* ── CONTROLS ─────────────────────────────────────────────────────── */

.controls { display: grid; grid-template-columns: minmax(200px, 1fr) 140px 160px auto; gap: 12px; align-items: end; margin-top: 16px; padding: 16px; border-radius: var(--r-lg); }

.stats-controls { grid-template-columns: 140px 160px minmax(160px, 1fr); }

.worker-combobox { position: relative; }

.worker-combobox input { width: 100%; box-sizing: border-box; }

.worker-combobox-list {

  position: absolute; top: calc(100% + 4px); left: 0; right: 0;

  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);

  box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto;

  z-index: 200; list-style: none; margin: 0; padding: 4px 0;

}

.worker-combobox-list li { padding: 8px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.worker-combobox-list li:hover, .worker-combobox-list li.active { background: var(--blue-soft); color: var(--blue-ink); }

.nav-buttons { display: flex; gap: 8px; }

.sub-hoy-nav { margin-bottom: 12px; align-items: center; }

.sub-hoy-nav input[type=date] { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; }

.nav-buttons button { min-width: 44px; border-radius: var(--r-sm); }



/* ── KPI STRIP ────────────────────────────────────────────────────── */

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; }

.metric { padding: 18px 20px; background: #fff; }

.metric span { display: block; color: var(--fg-3); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.metric strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 900; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; line-height: 1; }

.metric.warn strong { color: var(--amber); }

.legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 18px 2px 10px; color: var(--fg-3); font-size: 13px; }

.legend span { display: inline-flex; gap: 7px; align-items: center; }

.swatch { width: 16px; height: 9px; border-radius: var(--r-pill); display: inline-block; }

.swatch.work { background: var(--grad-segment); }

.swatch.entry { background: var(--blue); }

.swatch.exit  { background: var(--green); }

.swatch.open  { background: var(--amber); }

.target-line { width: 20px; height: 3px; background: linear-gradient(90deg, var(--green), var(--green-bright)); display: inline-block; }



/* ── PANEL ────────────────────────────────────────────────────────── */

.panel { border-radius: var(--r-lg); overflow: hidden; max-width: 100%; }

.panel-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: center; }

.panel-head > div { display: grid; gap: 4px; }

.panel-head p { font-size: 13px; line-height: 1.35; }

.panel-head-controls { align-items: end; }
/* V85: "Editar partes" reubicado junto al contador de "Tabla detallada de
   partes" (pedido explicito del usuario) en vez de perdido en la fila de
   botones de arriba. */
.partes-table-head-actions { display: flex; align-items: center; gap: 10px; }

.calendar-filter { width: min(320px, 100%); gap: 5px; }



/* ── TIMELINE / FICHAJES VIEW ─────────────────────────────────────── */

.days { display: grid; max-width: 100%; overflow: visible /* fix: dejar salir el bocadillo de crear/editar fichaje */; }

.day-row { display: grid; grid-template-columns: 170px minmax(360px, 1fr) 280px 120px; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); overflow: visible /* fix: dejar salir el bocadillo de crear/editar fichaje */; }

.day-row:last-child { border-bottom: 0; }

.day-title { display: flex; flex-direction: column; gap: 5px; }

.day-title strong { font-size: 15px; font-weight: 700; }

.day-title span, .day-total span, .segment-note { color: var(--fg-3); font-size: 12px; }

.timeline-wrap { display: grid; gap: 7px; min-width: 0; max-width: 100%; overflow: hidden; }

.timeline-scale { position: relative; width: 100%; max-width: 100%; height: 18px; color: var(--fg-3); font-size: 11px; overflow: hidden; }

.timeline-scale span { position: absolute; transform: translateX(-50%); }

.timeline-scale span:nth-child(1) { left: 0%; transform: translateX(0); }

.timeline-scale span:nth-child(2) { left: 25%; }

.timeline-scale span:nth-child(3) { left: 33.333%; color: var(--green); font-weight: 800; }

.timeline-scale span:nth-child(4) { left: 50%; }

.timeline-scale span:nth-child(5) { left: 66.666%; }

.timeline-scale span:nth-child(6) { left: 83.333%; }

.timeline-scale span:nth-child(7) { left: 100%; transform: translateX(-100%); }

.timeline, .target-progress {

  position: relative; display: block; width: 100%; max-width: 100%; min-width: 0;

  height: 28px; border-radius: 50px; background: #d8dee8;

  overflow: hidden; contain: paint; isolation: isolate;

  box-shadow: inset 0 2px 5px rgba(17,32,51,0.14);

}

.timeline {

  background:

    linear-gradient(90deg, rgba(23,32,51,0.11) 1px, transparent 1px) 0 0 / 8.333% 100%,

    #d8dee8;

}

.timeline::after { content: ""; position: absolute; top: 0; bottom: 0; left: 33.333%; width: 2px; background: rgba(17,153,142,0.55); }

.now-progress { position: absolute; top: 0; left: 0; height: 100%; border-radius: 50px 0 0 50px; background: rgba(37,99,235,0.14); }

.now-marker { position: absolute; top: -3px; width: 3px; height: 34px; border-radius: var(--r-pill); background: var(--red); transform: translateX(-50%); z-index: 4; box-shadow: 0 0 0 3px rgba(216,72,72,0.16); }

.segment { position: absolute; top: 0; height: 100%; min-width: 4px; max-width: 100%; border-radius: 50px; background: var(--grad-segment); z-index: 2; }

.segment.open { background: linear-gradient(90deg, var(--amber), #ffd36b); }

.segment::after, .target-progress .fill::after, .target-progress .over::after { content: ""; position: absolute; top: 4px; left: 10px; right: 10px; height: 7px; background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); border-radius: 20px; }

.marker { position: absolute; top: 2px; width: 6px; height: 24px; border-radius: var(--r-pill); transform: translateX(-50%); z-index: 2; }

.marker.entry { background: #004ea8; }

.marker.exit  { background: #087a44; }

.target-progress { height: 14px; }

.target-progress .fill, .target-progress .over { position: relative; height: 100%; width: 0; max-width: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--green), var(--green-bright)); }

.target-progress .over { position: absolute; top: 0; right: 0; background: linear-gradient(90deg, #ff416c, #ff4b2b); }

.day-total { display: grid; gap: 5px; text-align: right; }

.day-total strong { font-size: 18px; font-weight: 800; }

.day-total .open { color: var(--amber); }

.day-fichajes-detail { display: grid; gap: 7px; min-width: 0; }

.fichaje-pill { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #f8fbff; }

.fichaje-pill > div { min-width: 0; }

.fichaje-pill > div strong { display: block; font-size: 13px; margin-bottom: 4px; white-space: nowrap; }

.fichaje-pill > div span { display: block; color: var(--fg-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fichaje-pill.open { border-color: #f0cf85; background: var(--amber-soft); }

.fichaje-pill .status { color: var(--green); font-weight: 700; white-space: nowrap; }

.fichaje-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; flex-wrap: wrap; max-width: 210px; min-width: 0; }

.fichaje-pill.open .status { color: var(--amber); }

.cerrar-fichaje-wrap { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.btn-cerrar-fichaje { font-size: 12px; padding: 4px 10px; border: 1px solid var(--amber); border-radius: var(--r-xs); background: var(--amber-soft); color: #b45309; font-weight: 600; }

.btn-cerrar-fichaje:hover { background: #fef3c7; }

.cerrar-fichaje-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cerrar-fichaje-form[hidden] { display: none !important; }

.cerrar-hora-input { font-size: 13px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; }

.btn-cerrar-confirm { font-size: 12px; padding: 4px 10px; border: none; border-radius: var(--r-xs); background: var(--green); color: #fff; font-weight: 600; }

.btn-cerrar-confirm:disabled { opacity: 0.6; cursor: default; }

.btn-cerrar-cancel { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; }



/* ── V3.52 EDITAR / CREAR FICHAJE (admin/rrhh/editor) ─────────────── */

/* Lapiz compacto a la derecha del tramo, junto a la duracion */

.btn-edit-fichaje-mini {

  width: 26px; height: 26px; padding: 0;

  display: inline-grid; place-items: center;

  font-size: 13px; line-height: 1;

  border: 1px solid var(--line); border-radius: 8px;

  background: #fff; color: var(--ink-soft);

  flex: 0 0 auto;

}

.btn-edit-fichaje-mini:hover { background: #f1f5f9; color: var(--ink); }

/* "+" compacto alineado a la derecha; no genera fila alta */

.create-fichaje-wrap { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.btn-create-fichaje-mini {

  width: 26px; height: 26px; padding: 0;

  display: inline-grid; place-items: center;

  font-size: 16px; line-height: 1;

  border: 1px dashed var(--line); border-radius: 8px;

  background: #fff; color: var(--ink-soft);

  flex: 0 0 auto;

}

.btn-create-fichaje-mini:hover { background: #f1f5f9; color: var(--ink); }

/* Formulario desplegable (solo ocupa sitio cuando esta abierto) */

.edit-fichaje-form, .create-fichaje-form { grid-column: 1 / -1; width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; padding-top: 6px; }

.edit-fichaje-form[hidden], .create-fichaje-form[hidden] { display: none !important; }

.edit-fichaje-form label, .create-fichaje-form label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); }

.edit-fichaje-form input[type="time"], .create-fichaje-form input[type="time"] { font-size: 13px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; }

.edit-fichaje-obra { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; max-width: 220px; }

.btn-edit-confirm, .btn-create-confirm { font-size: 12px; padding: 4px 10px; border: none; border-radius: var(--r-xs); background: var(--green); color: #fff; font-weight: 600; }

.btn-edit-confirm:disabled, .btn-create-confirm:disabled { opacity: 0.6; cursor: default; }

.btn-edit-cancel, .btn-create-cancel { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; }

/* V3.55: campo motivo de modificación */

.edit-motivo-label { flex: 1 1 100%; margin-top: 4px; }

.edit-motivo-input { font-size: 12px; padding: 3px 6px; border: 1px solid var(--amber, #f59e0b); border-radius: var(--r-xs); background: #fffbeb; width: 100%; box-sizing: border-box; }

.edit-motivo-required { color: var(--red, #ef4444); font-size: 11px; margin-left: 2px; }



/* ── RESUMEN MENSUAL ──────────────────────────────────────────────── */

.monthly-controls { grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) auto auto; justify-content: start; }

.segmented-control { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); }

.segmented-control button { border: 0; border-radius: 6px; background: transparent; color: var(--fg-3); font-weight: 700; padding: 9px 12px; height: auto; }

.segmented-control button.active { background: #fff; color: var(--fg-1); box-shadow: 0 1px 4px rgba(15,23,42,0.12); }

.monthly-panel { margin-top: 16px; overflow: hidden; }

.monthly-body { margin-top: 12px; }

.monthly-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; max-height: calc(100vh - 330px); }

.monthly-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; }

.monthly-table th, .monthly-table td { border: 1px solid #d7e0ec; padding: 8px 9px; text-align: center; white-space: nowrap; }

.monthly-table th { position: sticky; top: 0; z-index: 2; background: var(--blue-soft); color: #15223a; font-size: 12px; font-weight: 700; letter-spacing: .3px; }

.monthly-table td:first-child, .monthly-table th:first-child,

.monthly-table td:nth-child(2), .monthly-table th:nth-child(2),

.monthly-table td:nth-child(3), .monthly-table th:nth-child(3) { text-align: left; }

.monthly-table .worker-cell { min-width: 180px; font-weight: 700; font-size: 13px; }

.monthly-table .day-col { min-width: 42px; }

.monthly-table td.ok { background: #eefcf4; color: #0f6b3a; font-weight: 700; }

.monthly-table td.open { background: #fff4de; color: #b45309; font-weight: 800; }

.monthly-table td.vacation { background: var(--blue-soft); color: #2455b8; font-weight: 800; }

.monthly-table td.festivo { background: #f1f5f9; color: #475569; font-weight: 800; }

.monthly-table td.baja { background: var(--red-soft); color: #be123c; font-weight: 800; }

.monthly-table .total-col { background: var(--surface-soft); font-weight: 800; font-size: 13px; }

.monthly-table .empty-cell { padding: 24px; color: var(--fg-3); }

/* V143: "nombres fijos" -- columnas de empresa/teléfono/trabajador/obra
   ancladas a la izquierda al desplazar la tabla horizontalmente (muchas
   columnas de día). El "left" real de cada una lo calcula
   partesFijarColumnasTabla() en JS (los anchos dependen del contenido).
   La celda de esquina (fija + cabecera) necesita más z-index que las dos
   por separado para quedar siempre encima. */
.monthly-table .parte-fixed-col { position: sticky; left: 0; background: #fff; z-index: 1; }

.monthly-table thead th.parte-fixed-col { z-index: 3; background: var(--blue-soft); }

.monthly-table tbody tr:hover td.parte-fixed-col { background: #eef3fb; }

/* V143: ".monthly-table, .partes-table, ..." (más abajo en este mismo
   fichero) le pone "overflow: hidden" a la propia tabla para recortar las
   esquinas redondeadas -- pero eso rompe "position: sticky" en sus celdas
   (una tabla con overflow:hidden se convierte en su propio contenedor de
   scroll a efectos de sticky, así que la columna fija queda "pegada" a la
   tabla en vez de al div que de verdad se desplaza). El contenedor exterior
   ".monthly-scroll" ya tiene su propio overflow:hidden con radio a juego,
   así que quitarlo aquí no pierde el redondeado. Especificidad de clase
   doble a propósito, para ganar sin depender del orden de aparición.  */
.monthly-table.partes-summary-table { overflow: visible; }

.monthly-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 10px 4px; font-size: 11px; color: var(--fg-3); border-top: 1px solid var(--line); }

.monthly-legend span { display: flex; align-items: center; gap: 4px; }

.monthly-legend span.ok { color: #0f6b3a; }

.monthly-legend span.open { color: #b45309; font-weight: 700; }

.monthly-legend span.vacation { color: #2455b8; font-weight: 700; }

.monthly-legend span.festivo { color: #475569; font-weight: 700; }

.monthly-legend span.baja { color: #be123c; font-weight: 700; }

.monthly-metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.monthly-metrics .metric { flex: 1; min-width: 110px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }

.monthly-metrics .metric span { font-size: 12px; color: var(--fg-3); display: block; }

.monthly-metrics .metric strong { font-size: 22px; color: var(--fg-1); display: block; margin-top: 4px; font-weight: 900; }



/* ── STATS / DETAILS ──────────────────────────────────────────────── */

.details, .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

.stats-grid { grid-template-columns: 1.2fr 0.8fr; }

.daily-bars { display: grid; gap: 9px; padding: 14px; }

.daily-bar-row { display: grid; grid-template-columns: 90px minmax(120px, 1fr) 68px; gap: 10px; align-items: center; color: var(--fg-3); font-size: 12px; }

.daily-bar-row div { height: 12px; border-radius: var(--r-pill); background: #e5ebf3; overflow: hidden; }

.daily-bar-row i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--blue), var(--green-bright)); }

.daily-bar-row strong { color: var(--fg-1); text-align: right; }



/* ── VACACIONES ───────────────────────────────────────────────────── */

.vacation-calendar-panel { margin-top: 16px; }

#vacationWorkerSearch, #vacationCalendarWorkerSearch { margin-bottom: 8px; }

.vacation-calendar { display: grid; grid-template-columns: repeat(7, minmax(38px, 1fr)); gap: 8px; padding: 16px; }

.vacation-calendar strong { text-align: center; color: var(--fg-3); font-size: 12px; }

.vacation-calendar > span, .vacation-calendar button { min-height: 48px; border-radius: var(--r-sm); }

.vacation-calendar button { position: relative; border: 1px solid var(--line); background: #fff; color: var(--fg-1); transition: transform var(--dur-fast), box-shadow var(--dur-fast); }

.vacation-calendar button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

.vacation-calendar button.has-vacation { border-color: #88d9b0; background: var(--green-soft); }

.vacation-calendar button.global-holiday { border-color: #d7e0ec; background: var(--surface-soft); }

.vacation-dots { position: absolute; left: 8px; right: 8px; bottom: 7px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }

.vacation-dots i { width: 7px; height: 7px; border-radius: var(--r-pill); background: #1aa66a; box-shadow: 0 0 0 2px rgba(26,166,106,0.12); }

.vacation-calendar button.global-holiday .vacation-dots { bottom: 8px; }

.vacation-calendar button.global-holiday .vacation-dots i { width: 5px; height: 5px; background: #64748b; box-shadow: none; }

.vacation-dots em { color: var(--green-ink); font-size: 11px; font-style: normal; font-weight: 800; }



/* V6: iniciales en vez de puntos. UNA sola fila (nowrap) para que la altura de la

   celda no cambie segun cuanta gente libre ese dia. Caben 5 de 19px en 127px. */

.vacation-calendar > span, .vacation-calendar button { min-height: 74px; }

.vacation-avatars {

  position: absolute; left: 4px; right: 4px; bottom: 6px;

  display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; justify-content: center;

}

.vac-avatar {

  width: 19px; height: 19px; flex: none; border-radius: var(--r-pill);

  background: var(--worker-color, #94a3b8); color: #fff;

  font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: .2px;

  display: inline-flex; align-items: center; justify-content: center;

  border: 1px solid rgba(255,255,255,.5);

}

/* El buscador apaga a los que no cuadran en vez de esconderlos: se sigue viendo

   la forma del mes y salta a la vista donde esta la persona buscada. */

.vac-avatar.is-dimmed { opacity: .18; filter: grayscale(1); }

.vac-more { color: var(--fg-2); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }

.vacation-festivo {

  position: absolute; left: 4px; right: 4px; bottom: 8px;

  font-size: 10px; font-weight: 700; color: var(--fg-3); text-align: center;

}

.vacation-calendar button.is-open { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,.18); }



/* Bocadillo del dia: aqui se ve QUIEN es cada inicial (y los 20 si hacen falta) */

.vacation-day-popover {

  position: absolute; z-index: 30; width: 250px;

  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);

  box-shadow: var(--shadow-3, 0 12px 28px rgba(15,23,42,.16)); padding: 10px;

}

.vacation-day-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.vacation-day-popover-head strong { display: block; font-size: 13px; }

.vacation-day-popover-head small { color: var(--fg-3); font-size: 11px; }

.vacation-day-popover-close {

  border: 0; background: transparent; cursor: pointer; font-size: 18px;

  line-height: 1; color: var(--fg-3); padding: 0 2px;

}

.vacation-day-popover ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; display: grid; gap: 6px; }

.vacation-day-popover li { display: flex; align-items: center; gap: 8px; }

.vacation-day-popover li span { display: grid; min-width: 0; }

.vacation-day-popover li strong { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vacation-day-popover li small { font-size: 10px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* V6: dias de vacaciones/baja del trabajador en la tabla de la ficha */

.day-row-absence { background: linear-gradient(180deg, #fbfdff, #f4f8ff); }

.day-row-vac .day-title span { color: #1e40af; font-weight: 700; }

.day-row-baja .day-title span { color: #92600b; font-weight: 700; }

.day-total strong.absence { font-size: 18px; }

.day-row-vac .day-total strong.absence { color: #1e40af; }

.day-row-baja .day-total strong.absence { color: #92600b; }

.fichaje-pill-absence { border-color: #cdddff; background: var(--blue-soft); }

.fichaje-pill-baja { border-color: #f2dca6; background: var(--amber-soft); }

.fichaje-pill-absence .status { color: #1e40af; font-weight: 700; }

.fichaje-pill-baja .status { color: #92600b; }



/* V6: bocadillo con el desglose de partes de un dia (2+ partes) */

.parte-pop {

  position: fixed; z-index: 40; width: min(410px, calc(100vw - 24px));
  box-sizing: border-box;

  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);

  box-shadow: var(--shadow-3, 0 12px 28px rgba(15,23,42,.16)); padding: 10px;

}

.parte-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.parte-pop-head strong { display: block; font-size: 13px; }

.parte-pop-head small { color: var(--fg-3); font-size: 11px; }

.parte-pop-close { border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--fg-3); padding: 0 2px; }

.parte-pop-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 240px; overflow-y: auto; overflow-x: hidden; display: grid; gap: 4px; }

.parte-pop-row {

  width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px;

  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);

  background: #fbfdff; cursor: pointer; font-size: 12px; text-align: left;

}

.parte-pop-row:hover { background: var(--blue-soft); border-color: #cdddff; }
.parte-pop-row { cursor: default; }
.parte-pop-edit { flex: 0 0 auto; border: 1px solid #cdddff; border-radius: 6px; background: #fff; color: #1742b7; padding: 4px 7px; font-size: 11px; font-weight: 800; cursor: pointer; }
.parte-pop-edit:hover { background: var(--blue-soft); }
.parte-pop-obra { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.parte-pop-h { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.parte-pop-add {

  width: 100%; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm);

  background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--fg-2);

}

.parte-pop-add:hover { background: var(--surface-soft); }

.fichaje-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; flex-wrap: wrap; max-width: 210px; min-width: 0; }

.fichaje-actions .location-links { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 145px; white-space: normal; overflow: visible; text-overflow: clip; }

.location-links a { display: inline-flex; align-items: center; min-height: 22px; border: 1px solid #bfdbfe; border-radius: var(--r-xs); padding: 2px 6px; color: #1d4ed8; background: var(--blue-soft); font-size: 10.5px; line-height: 1; font-weight: 800; text-decoration: none; white-space: nowrap; }

.location-links a:hover { background: #dbeafe; }



/* ── FORM / LIST PANELS ───────────────────────────────────────────── */

.details > article, .form-panel, .list-panel { border-radius: var(--r-lg); padding: 16px; }

.form-panel { display: grid; gap: 12px; align-content: start; }

.mini-list { display: grid; gap: 8px; margin-top: 12px; }

.compact-panel .mini-list { gap: 10px; margin-top: 0; padding: 14px 16px 16px; }

.mini-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #dfe8f4; border-radius: var(--r-sm); background: #fbfdff; }

.compact-panel .mini-item { align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid #dbe5f1; border-radius: var(--r-sm); background: linear-gradient(180deg, #ffffff, #f8fbff); }

.mini-item:last-child { border-bottom: 0; }

.mini-item strong { color: var(--fg-1); font-weight: 650; }



/* ── REVIEW ITEMS ─────────────────────────────────────────────────── */

.review-list { display: grid; gap: 10px; padding: 14px; }

.review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 66px; padding: 13px 14px; border: 1px solid #d8e4f2; border-left: 5px solid var(--amber); border-radius: var(--r-sm); background: linear-gradient(180deg, #ffffff, #f8fbff); transition: transform var(--dur-fast); }

.review-item:hover { transform: translateY(-1px); }

.review-item div { display: grid; gap: 4px; min-width: 0; }

.review-item strong { color: var(--fg-1); font-weight: 750; }

.review-item span { color: #48617d; font-size: 13px; line-height: 1.35; }

.review-item b { padding: 7px 10px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber-ink); font-size: 12px; white-space: nowrap; }

.review-item.ok { border-left-color: var(--green); }

.review-item.ok b { background: var(--green-soft); color: var(--green-ink); }

.empty { padding: 36px 18px; color: var(--fg-3); text-align: center; font-size: 13px; }



/* ── VACATION SECTION ─────────────────────────────────────────────── */

.vacation-requests-panel, .vacation-balances-panel { min-height: 220px; }

/* V42: mismo alto que "Registrar ausencia" aunque esté vacía (la fila usa

   align-items:start, así que por defecto cada tarjeta se queda con su

   altura de contenido — esta en concreto se estira a la altura de la fila). */

#vacationsSection .vacation-requests-panel { align-self: stretch; }

.vacation-request-item { align-items: flex-start; gap: 10px; }

.request-actions { display: flex; gap: 8px; width: 100%; margin-top: 8px; }

.request-actions button { min-height: 34px; padding: 0 14px; border-radius: var(--r-sm); }

.vacation-balance-item strong { white-space: nowrap; }

.admin-config-panel { border: 1px solid #bfdbfe; background: var(--surface-tint); }

.panel-muted { margin: 0 0 12px; color: #475569; line-height: 1.35; }

.vacation-request-item { gap: 10px; align-items: flex-start; }

.mini-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.mini-actions button { padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; }

.mini-actions button:hover { opacity: .85; }

.mini-actions button:not(.secondary-button) { background: var(--fg-1); color: #fff; border: none; }

.mini-actions .secondary-button { background: #f1f5fb; color: #1d2a44; border: 1px solid #cad6ea; }



/* ── TRABAJADORES ─────────────────────────────────────────────────── */

.inline-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }

.inline-filters label { min-width: 180px; }

.worker-list-cards, .work-list-cards, .vacation-balance-list { display: grid; gap: 10px; }

.worker-card, .work-card, .vacation-balance-card { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(140px, .75fr) minmax(150px, .8fr) minmax(160px, .85fr) 36px; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, #fff, #f8fbff); transition: transform var(--dur-fast), box-shadow var(--dur-fast); }

.worker-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

.work-card { grid-template-columns: 1fr auto; }

.worker-card-main, .worker-card-meta, .balance-worker, .vacation-balance-card > div { display: grid; gap: 4px; }

.worker-card-main strong, .work-card strong, .balance-worker strong { color: var(--fg-1); font-size: 15px; font-weight: 800; }

.worker-card-main span, .worker-card-meta span, .work-card span, .vacation-balance-card span { color: var(--fg-3); font-size: 12px; }

.worker-card-meta strong, .vacation-balance-card strong { color: var(--fg-1); font-size: 14px; font-weight: 700; }

.worker-role-select { min-height: 36px; padding: 7px 10px; font-size: 13px; }

.vacation-balance-card { grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(90px, .55fr)) auto; grid-template-rows: auto auto; row-gap: 0; }

.balance-rest strong { font-size: 18px; }

.vacation-balance-summary { margin-bottom: 16px; }

.vacation-upcoming-panel { min-height: 140px; }

.upcoming-vacations-list { max-height: 220px; overflow-y: auto; }

.upcoming-vacation-current { background: #f0fdf4; }

.upcoming-vacation-tag { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 2px 7px; margin-left: 6px; }

.vacation-calendar-top-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 0 4px; }

.vacation-cancel-list { display: grid; gap: 8px; margin-top: 12px; max-height: 480px; overflow-y: auto; }

.cancel-vac-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding: 14px 0 6px; }

.cancel-vac-filters label { min-width: 160px; }

.cancel-vac-bulkbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 4px 0 8px; border-top: 1px solid var(--line); margin-top: 4px; }

.vac-cancel-check-label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; cursor: pointer; }

.vac-cancel-check-label span { overflow-wrap: anywhere; }

.mini-item:has(.vac-cancel-check) { display: flex; align-items: center; gap: 10px; }

.btn-sm { padding: 4px 10px; font-size: 12px; }

.worker-obra-select { font-size: 13px; width: 100%; max-width: 100%; }

.btn-auto-obra { font-size: 11px; padding: 3px 8px; margin-top: 4px; display: block; }

.worker-card-meta { min-width: 0; }

.worker-card-meta strong, .worker-card-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }

.worker-card-meta select { min-width: 0; max-width: 100%; width: 100%; }



/* V3.52: tarjeta de trabajador con flex-wrap — las celdas saltan de linea

   en vez de estrujarse y comerse las letras. */

.worker-card {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px 16px;

}

.worker-card .worker-card-main { flex: 1 1 190px; min-width: 170px; }

.worker-card .worker-card-meta { flex: 1 1 200px; min-width: 185px; }

.worker-card .btn-delete-worker { flex: 0 0 auto; margin-left: auto; align-self: center; }

/* "Ultima obra" en 2 lineas si hace falta, sin comerse el nombre */

.worker-card .worker-card-meta strong {

  white-space: normal;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  line-height: 1.3;

  font-size: 13px;

}

.calendar-head-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.calendar-head-left .secondary-button { align-self: flex-start; }



/* ── OBRAS ────────────────────────────────────────────────────────── */

.works-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

.works-form-inline { padding: 20px 24px; }

.works-form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.works-form-row label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }

.works-form-row label span { font-size: 12px; color: var(--fg-3); font-weight: 600; }

.works-form-row button { white-space: nowrap; align-self: flex-end; height: 40px; }

.work-card { grid-template-columns: 80px minmax(180px, 1fr) auto auto; gap: 16px; }

.work-cod { font-size: 15px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }

.work-name { font-size: 14px; color: var(--fg-1); }

input[readonly] { background: var(--surface-soft); color: var(--fg-3); cursor: default; border-color: var(--line); }

.panel-hint { margin: 8px 0 18px; color: var(--fg-3); font-size: 13px; line-height: 1.5; }

.list-panel h2, .mobile-perms-panel h2 { margin-bottom: 4px; }

.work-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.work-resp-select { font-size: 12px; padding: 4px 6px; min-height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--fg-1); max-width: 160px; }



/* ── USUARIOS / PERMISOS ──────────────────────────────────────────── */

.user-permission-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(150px, 200px) auto auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: box-shadow var(--dur-fast); }

.user-permission-row:hover { box-shadow: var(--shadow-2); }

.user-info { display: grid; gap: 3px; }

.user-info strong { color: var(--fg-1); font-size: 15px; font-weight: 800; }

.user-info span { color: var(--fg-3); font-size: 12px; }

.user-role-sel { min-height: 36px; align-self: start; }

.user-permission-row select { min-height: 38px; }

.user-permission-row input[type="text"] { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); font-size: 13px; min-height: 36px; }

.user-obras-panel { display: flex; flex-direction: column; gap: 6px; }

.user-obras-toggle { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.obras-count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; font-size: 11px; font-weight: 700; padding: 0 5px; }

.user-obras-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface-soft); margin-top: 2px; }

.user-obras-list.hidden { display: none; }

.obra-check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 3px 0; border-bottom: 1px solid var(--line); }

.obra-check-label:last-child { border-bottom: none; }

.obra-check-label input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

.obra-check-label span { color: var(--fg-1); }

.user-obras-empty { font-size: 12px; color: var(--fg-3); font-style: italic; }



/* ── STATUS BADGES ────────────────────────────────────────────────── */

.status-ok, .status-off { justify-self: start; border-radius: var(--r-pill); padding: 5px 9px; font-style: normal; font-size: 12px; font-weight: 800; }

.status-ok  { background: var(--green-soft); color: var(--green-ink); }

.status-off { background: var(--surface-soft); color: var(--fg-3); }

.work-zona-badge { display: inline-block; justify-self: unset; margin-left: 6px; border-radius: var(--r-pill); padding: 2px 8px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--amber-soft); color: var(--amber-ink); vertical-align: middle; }



/* ── BUTTONS ──────────────────────────────────────────────────────── */

.danger-button { border: 1px solid #fecaca; border-radius: var(--r-xs); background: var(--red-soft); color: #b91c1c; padding: 0 12px; height: 40px; font-weight: 800; }

.danger-button:hover { background: #ffe4e4; }

.primary-button { background: var(--blue); color: #fff; border: none; padding: 8px 18px; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }

.primary-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); background: #1e52cc; }

.link-button { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; height: auto; }

.link-button:hover { color: var(--blue-ink); }



/* ── VAC TABS ─────────────────────────────────────────────────────── */

.vac-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--line); padding-bottom: 0; }

.vac-tab-btn { padding: 8px 18px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fg-3); border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 0; transition: color .15s, border-color .15s; height: auto; }

.vac-tab-btn:hover { color: var(--fg-1); }

.vac-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }

.vac-tab-panel { display: block; }

.vac-tab-panel.hidden { display: none; }



/* ── BALANCE DETAIL ───────────────────────────────────────────────── */

.balance-detail-toggle { cursor: pointer; color: var(--blue); font-size: 12px; white-space: nowrap; user-select: none; align-self: center; }

.balance-detail-toggle:hover { text-decoration: underline; }

.balance-detail-list { grid-column: 1 / -1; margin: 8px 0 4px; padding: 8px 12px; background: var(--blue-soft); border-radius: var(--r-sm); border: 1px solid #d6e4ff; list-style: none; font-size: 12px; line-height: 1.7; color: var(--fg-1); }

.balance-detail-list.hidden { display: none; }

.balance-detail-list li { border-bottom: 1px solid #e4eeff; padding: 3px 0; }

.balance-detail-list li:last-child { border-bottom: none; }



/* ── MOBILE PERMS TABLE ───────────────────────────────────────────── */

.mobile-perms-panel { margin-top: 1.5rem; }

.mobile-perms-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.mobile-perms-table th, .mobile-perms-table td { padding: .5rem .75rem; text-align: center; border-bottom: 1px solid var(--line); }

.mobile-perms-table th:first-child, .mobile-perms-table td:first-child { text-align: left; font-weight: 600; color: var(--fg-1); }

.mobile-perms-table thead th { background: var(--surface-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }

.mobile-perms-table tbody tr:hover { background: var(--surface-soft); }

.mobile-perms-table input[type=checkbox] { width: 1.1rem; height: 1.1rem; cursor: pointer; accent-color: var(--blue); }



/* ── MODAL DE PERMISOS ────────────────────────────────────────────── */

.modal-overlay { position: fixed; inset: 0; background: rgba(20,35,60,0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }

.modal-overlay.hidden { display: none; }

.modal-card { background: #fff; border-radius: var(--r-lg); max-width: 560px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-4); overflow: hidden; }

.modal-card-lg { max-width: 920px; }

.sub-ficha-controls { align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.sub-ficha-summary { margin-bottom: 14px; }

#subFichaModal .today-table-scroll { margin-bottom: 12px; }

/* V50: la tabla .today-table trae min-width:980px pensado para su version de

   7 columnas con foto/franja horaria -- la Ficha de subcontrata solo tiene 6

   columnas simples, con ese minimo salía la barra de scroll siempre aunque

   sobrara sitio de sobra. La quitamos aquí y dejamos que el texto de la obra

   pueda partirse en dos líneas en vez de forzar ancho. */

#subFichaModal .today-table { min-width: 0 !important; width: 100% !important; table-layout: fixed; }

#subFichaModal .today-table td:nth-child(4) { white-space: normal; word-break: break-word; }

#subFichaModal .today-table th:last-child,

#subFichaModal .today-table td:last-child { width: 90px; }

.obra-pick-list { display: flex; flex-direction: column; gap: 4px; }

.obra-pick-row { display: block; width: 100%; text-align: left; padding: 9px 10px; border: none; border-radius: var(--r-xs); background: transparent; cursor: pointer; font-size: 13px; color: var(--fg-1); }

.obra-pick-row:hover { background: var(--blue-soft); }

.obra-pick-row.hidden { display: none; }

.obra-pick-autorizada { background: #f1f7ff; }

.obra-pick-tag { margin-left: 6px; font-size: 11px; color: var(--blue); background: #e3edff; padding: 2px 6px; border-radius: 999px; }

#subFichajeFormBorrar { margin-right: auto; }

.sub-fichaje-form-row { display: flex; gap: 12px; }

.sub-fichaje-form-row .modal-field { flex: 1; }

.sub-fichaje-form-obra { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); font-size: 13px; }

.sub-fichaje-form-obra span:first-child { flex: 1; }

.ask-modal-card { max-width: 440px; }

.ask-modal-card .modal-subtitle { white-space: pre-line; }

/* V49: askModal "anclado" junto al botón que lo abrió, en vez de centrado */

.modal-overlay.modal-anchored { background: transparent; align-items: flex-start; justify-content: flex-start; padding: 0; }

.modal-overlay.modal-anchored .modal-card { position: absolute; box-shadow: var(--shadow-4), 0 0 0 1px var(--line); width: 360px; max-width: calc(100vw - 24px); }

.ask-modal-input { width: 100%; min-height: 42px; max-height: 220px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 14px; resize: vertical; }

.ask-modal-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px; border-bottom: 1px solid var(--line); }

.modal-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--fg-1); }

.modal-subtitle { margin: 4px 0 0; color: var(--fg-3); font-size: 13px; }

.modal-close { background: transparent; border: none; font-size: 28px; line-height: 1; color: var(--fg-3); cursor: pointer; padding: 0 4px; height: auto; }

.modal-close:hover { color: var(--fg-1); }

.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }

.modal-field { display: flex; flex-direction: column; gap: 6px; }

.modal-field > span, .modal-label { font-size: 12px; color: var(--fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.modal-field select,

.modal-field input[type=text],

.modal-field input[type=date],

.modal-field input[type=time] { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; }

.modal-inline-row { display: flex; gap: 8px; align-items: center; }

.modal-inline-row select { flex: 1; }

.modal-hint { margin: 0; color: var(--fg-3); font-size: 13px; }

.modal-search { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; width: 100%; }

.modal-obras-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-soft); }

.modal-obras-list label { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-xs); cursor: pointer; font-size: 13px; color: var(--fg-1); }

.modal-obras-list label:hover { background: var(--blue-soft); }

.modal-obras-list input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); }

.modal-obras-list .obra-row.hidden { display: none; }

.modal-obras-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.modal-obras-inactivas-toggle { margin: 6px 0; font-size: 12px; color: var(--fg-3); }
.obra-inactiva-label { color: var(--fg-3); font-style: normal; font-weight: 600; }

.modal-obras-count { margin-left: auto; color: var(--fg-3); font-size: 12px; }

.modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-soft); }

.btn-perms-trabajador { background: var(--blue-soft); color: var(--blue-ink); border: 1px solid #cfdcef; padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur-fast), transform var(--dur-fast); }

.btn-perms-trabajador:hover { background: #dde7f5; transform: translateY(-1px); }

.btn-perms-trabajador .perms-badge { background: var(--blue); color: #fff; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }



/* ── BUSCADOR + SCROLL LISTA TRABAJADORES ─────────────────────────── */

.workers-list-head {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 12px;

}

.workers-list-head h2 { flex-shrink: 0; }



#workersSearch {

  flex: 1;

  min-width: 160px;

  max-width: 320px;

  height: 36px;

  border: 1px solid var(--line);

  border-radius: var(--r-sm);

  padding: 0 12px;

  font-size: 13px;

  background: var(--surface-soft);

  color: var(--fg-1);

  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);

}

#workersSearch:focus {

  border-color: var(--io-indigo);

  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);

  background: #fff;

  outline: none;

}

#workersSearch::placeholder { color: var(--fg-4); }



.workers-count {

  font-size: 12px;

  font-weight: 700;

  color: var(--fg-3);

  white-space: nowrap;

  flex-shrink: 0;

}



.worker-list-scroll {

  max-height: 520px;

  overflow-y: auto;

  overflow-x: hidden;

  padding-right: 4px;

  scrollbar-width: thin;

  scrollbar-color: var(--line) transparent;

}

.worker-list-scroll::-webkit-scrollbar { width: 6px; }

.worker-list-scroll::-webkit-scrollbar-track { background: transparent; }

.worker-list-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

.worker-list-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }



/* ── BOTÓN BORRAR TRABAJADOR ──────────────────────────────────────── */

.btn-delete-worker {

  width: 36px; height: 36px; padding: 0;

  display: grid; place-items: center;

  border: 1px solid #fecaca;

  border-radius: var(--r-sm);

  background: var(--red-soft);

  color: var(--red-ink);

  font-size: 16px; font-weight: 700;

  flex-shrink: 0;

  transition: background var(--dur-fast), transform var(--dur-fast);

}

.btn-delete-worker:hover {

  background: #ffd6d6;

  transform: scale(1.08);

}



/* ── BOTÓN CAMBIAR TELÉFONO (V13.8) ───────────────────────────────── */

.btn-edit-telefono {

  width: 22px; height: 22px; padding: 0;

  display: inline-grid; place-items: center;

  border: 0; background: transparent;

  font-size: 12px; line-height: 1; opacity: .55;

  flex-shrink: 0; cursor: pointer;

  transition: opacity var(--dur-fast), transform var(--dur-fast);

}

.btn-edit-telefono:hover { opacity: 1; transform: scale(1.1); }



/* ── EMPTY STATES ─────────────────────────────────────────────────── */

.empty-state { display: grid; gap: 4px; padding: 18px; border: 1px dashed #c8d6ea; border-radius: var(--r-sm); color: var(--fg-3); background: var(--surface-soft); }



/* ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 980px) {

  .app { grid-template-columns: 1fr; }

  .sidebar { position: static; height: auto; grid-template-rows: auto; }

  .content { width: 100%; }

  .topbar, .today-head, .today-overview, .stats-grid, .controls, .panel-head, .day-row, .details, .form-grid { grid-template-columns: 1fr; }

  .summary-grid { grid-template-columns: 1fr 1fr; }

  .day-total { text-align: left; }

}

@media (max-width: 900px) {

  .worker-card, .vacation-balance-card { grid-template-columns: 1fr; }

  .inline-filters { display: grid; }

  .vacation-balance-card { grid-template-columns: 1fr 1fr; }

  .balance-detail-list { grid-column: 1 / -1; }

  .user-permission-row { grid-template-columns: 1fr; }

}

@media (max-width: 560px) {

  .content { padding: 10px; }

  .summary-grid { grid-template-columns: 1fr; }

}

@media (max-width: 1050px) {

  #vacationsSection .form-grid, .work-card { grid-template-columns: 1fr; }

  .work-actions { justify-content: stretch; }

  .work-actions button { flex: 1; }

}

#vacationsSection .form-grid { grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr); align-items: start; }

.form-grid-full { grid-column: 1 / -1; }

#vacationsSection .form-panel, #vacationsSection .list-panel { padding: 16px; }

#vacationsSection .form-panel label { gap: 5px; }

#vacationsSection .form-panel input, #vacationsSection .form-panel select { height: 38px; }

#vacationsSection .mini-list { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }

.vacation-request-item { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; border: 1px solid #dfe8f4; border-radius: var(--r-sm); background: #fbfdff; padding: 10px 12px; }

/* V139: los modales son independientes y los campos auxiliares no deben comprimirse. */
.create-fichaje-form .edit-motivo-label { flex: 1 1 100%; min-width: 0; display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: 6px; }
.create-fichaje-form .create-motivo-input { width: 100%; min-width: 0; min-height: 36px; box-sizing: border-box; }
#vacationsSection .vacation-requests-panel { align-self: flex-start; min-height: 0; }
.vacation-request-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.vacation-request-item > span { min-width: 0; line-height: 1.35; }
.vacation-request-item > strong { white-space: nowrap; align-self: flex-start; }
.vacation-request-item > .mini-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; border-top: 1px solid #e5edf7; padding-top: 8px; }
.vacation-request-item > .mini-actions button { min-width: 96px; min-height: 34px; }
@media (max-width: 760px) {
  .create-fichaje-form .edit-motivo-label { grid-template-columns: 1fr; align-items: stretch; }
  .vacation-request-item { grid-template-columns: 1fr; }
  .vacation-request-item > strong { justify-self: start; }
  .vacation-request-item > .mini-actions { justify-content: stretch; }
  .vacation-request-item > .mini-actions button { flex: 1 1 0; }
}

.vacation-balances-list .mini-item span { font-size: 13px; }



/* Conversaciones WhatsApp admin */

.conversation-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }

.conversation-head, .conversation-chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }

.conversation-filter { display: grid; gap: 6px; margin-bottom: 10px; color: var(--fg-3); font-size: 12px; font-weight: 700; }

.conversation-filter input { width: 100%; }

.conversation-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

.conversation-filter-grid label { display: grid; gap: 6px; color: var(--fg-3); font-size: 12px; font-weight: 700; }

.conversation-check { grid-template-columns: auto 1fr; align-items: center; }

.conversation-check input { width: auto; }

.conversation-people { display: grid; gap: 8px; max-height: 62vh; overflow: auto; padding-right: 4px; }

.conversation-person { text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: #f8fbff; padding: 10px; display: grid; gap: 3px; cursor: pointer; color: var(--fg); }

.conversation-person:hover, .conversation-person.active { border-color: var(--brand); background: var(--blue-soft); }

.conversation-person strong { font-size: 14px; }

.conversation-person span, .conversation-person small, .conversation-person em { color: var(--fg-3); font-size: 12px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conversation-count { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--fg-3); font-size: 12px; font-weight: 800; white-space: nowrap; }

.conversation-messages { height: auto; min-height: 120px; max-height: 68vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #f8fbff; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.conversation-message { display: flex; }

.conversation-message.worker { justify-content: flex-end; }

.conversation-message.system { justify-content: flex-start; }

.conversation-bubble { max-width: min(680px, 82%); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: white; box-shadow: var(--shadow-soft); }

.conversation-message.worker .conversation-bubble { background: #dcfce7; border-color: #bbf7d0; }

.conversation-message.has-error .conversation-bubble { background: #fff7ed; border-color: #fed7aa; }

.conversation-bubble p { margin: 0 0 6px; white-space: pre-wrap; line-height: 1.35; }

.conversation-bubble span { color: var(--fg-3); font-size: 11px; }

.empty-state.compact { padding: 12px; }

@media (max-width: 980px) { .conversation-layout { grid-template-columns: 1fr; } .conversation-messages, .conversation-people { max-height: none; height: auto; } }

.conversation-load-more { margin-top: 10px; width: 100%; justify-content: center; }

.hidden { display: none !important; }





/* Justificantes RRHH */

.documents-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: stretch; }

.documents-panel { min-height: 680px; display: flex; flex-direction: column; }

.documents-list { display: grid; gap: 12px; overflow: auto; max-height: 72vh; padding-right: 6px; }

.document-card { border: 1px solid #d5e0f2; background: rgba(255,255,255,0.88); border-radius: 14px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 12px 30px rgba(39,55,85,0.07); }

.document-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.document-card h3 { margin: 0; font-size: 16px; color: var(--fg-1); }

.document-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--fg-2); font-size: 13px; }

.document-pill { display: inline-flex; align-items: center; border: 1px solid #cdd9ee; border-radius: 999px; padding: 4px 8px; background: #f5f8fd; color: #44536d; font-size: 12px; font-weight: 700; }

.document-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.document-actions a, .document-actions button { text-decoration: none; border: 1px solid #bac9e5; background: #eef4ff; color: #1f4fbf; border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: 13px; }

.document-caption { color: var(--fg-2); font-size: 13px; padding: 8px 10px; background: #f7faff; border-radius: 10px; border: 1px dashed #cbd8ef; }

@media (max-width: 980px) { .documents-layout { grid-template-columns: 1fr; } .documents-panel { min-height: 520px; } }



/* Partes diarios */

.partes-form { display: grid; grid-template-columns: minmax(180px, 1.2fr) 150px 130px auto; gap: 10px; align-items: end; margin-bottom: 14px; padding: 12px; border: 1px solid #dbe6f5; border-radius: 14px; background: #f8fbff; }

.partes-form label { display: grid; gap: 6px; color: var(--fg-3); font-size: 12px; font-weight: 800; }

.partes-form input, .partes-form select, .partes-form textarea { width: 100%; }

.partes-form-wide { grid-column: 1 / -2; }

.parte-diff-ok { color: #0f9f6e; font-weight: 900; }

.parte-diff-warn { color: #c47a12; font-weight: 900; }

.parte-diff-bad { color: #dc2626; font-weight: 900; }

.parte-card-values { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px; }

.parte-card-values span { border: 1px solid #dce7f6; border-radius: 10px; background: #f7faff; padding: 8px 10px; color: var(--fg-2); font-size: 13px; }

.parte-card-values strong { display: block; color: var(--fg-1); font-size: 16px; }

@media (max-width: 980px) { .partes-form { grid-template-columns: 1fr; } .partes-form-wide { grid-column: auto; } }







/* Usuarios V3.39 */

.sidebar-note { cursor: pointer; }

.sidebar-note:hover { background: rgba(255,255,255,0.16); }

.sidebar-note:focus-visible { outline: 2px solid rgba(255,255,255,0.9); outline-offset: 2px; }

.user-permission-row-wide {

  grid-template-columns: minmax(170px, 0.9fr) minmax(180px, 0.9fr) minmax(260px, 1.5fr) minmax(190px, 0.8fr);

}

.user-info small { color: var(--fg-3); font-size: 11px; }

.user-controls-stack, .user-password-panel { display: grid; gap: 8px; align-content: start; }

.user-controls-stack label, .user-password-panel label { display: grid; gap: 5px; color: var(--fg-3); font-size: 12px; font-weight: 700; }

.user-pages-panel { display: grid; gap: 8px; }

.user-pages-panel > strong { color: var(--fg-1); font-size: 13px; }

.page-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }

.page-permission-check { display: flex; align-items: center; gap: 7px; min-height: 26px; color: var(--fg-2); font-size: 12px; font-weight: 700; }

.page-permission-check input { width: 16px; height: 16px; }

.danger-light-button {

  min-height: 36px; border: 1px solid #fecaca; background: #fff1f2; color: #b91c1c;

  border-radius: var(--r-xs); font-weight: 800; cursor: pointer;

}

.danger-light-button:hover { background: #ffe4e6; }

.empty-state { border: 1px dashed #cbd7e8; border-radius: var(--r-sm); padding: 16px; display: grid; gap: 4px; color: var(--fg-3); background: #f8fbff; }

.empty-state strong { color: var(--fg-1); }

.account-modal-card { max-width: 460px; }

@media (max-width: 980px) {

  .user-permission-row-wide { grid-template-columns: 1fr; }

  .page-permission-grid { grid-template-columns: 1fr; }

}



/* ── V3.41: tabla simple de usuarios de acceso ─────────────────── */

.users-access-wrap { overflow-x: auto; }

.users-access-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.users-access-table th, .users-access-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }

.users-access-table th { font-weight: 700; color: var(--fg-3); background: var(--surface-soft); position: sticky; top: 0; }

.users-access-table tr:hover td { background: rgba(33,99,232,0.04); }

.users-access-table .user-role-sel { width: 100%; max-width: 160px; padding: 4px 6px; font-size: 13px; }

.users-access-table .muted { color: var(--fg-3); }

.users-access-table .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; margin-right: 6px; vertical-align: middle; }

.users-access-table .status-dot.ok { background: #10b981; }

.users-access-table .user-obras-row td { background: var(--surface-soft); padding: 10px 14px; }

.users-access-table .user-obras-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; max-height: 280px; overflow-y: auto; }

.users-access-table .user-obras-row.hidden { display: none; }

/* V67: los 2-3 botones de acciones (permisos/contraseña/borrar) se quedaban

   sin sitio en columnas mas estrechas y el ultimo caia a una segunda linea

   -- en fila fija, sin envolver, y sin el margen suelto de .icon-btn. */

.users-access-table .users-access-actions {

  display: flex;

  align-items: center;

  gap: 6px;

  white-space: nowrap;

}

.users-access-table .users-access-actions .icon-btn { margin-right: 0; }



.icon-btn {

  display: inline-flex; align-items: center; justify-content: center;

  width: 30px; height: 30px; padding: 0; margin-right: 4px;

  border: 1px solid var(--line); border-radius: var(--r-xs);

  background: #fff; cursor: pointer; font-size: 15px; line-height: 1;

  transition: background 120ms ease, transform 120ms ease;

}

.icon-btn:hover { background: var(--surface-soft); }

.icon-btn:active { transform: translateY(1px); }

.icon-btn.danger { color: #b91c1c; border-color: #fecaca; }

.icon-btn.danger:hover { background: #fff1f2; }



/* Banner de error persistente */

.form-error-banner {

  margin-top: 10px; padding: 10px 12px;

  border: 1px solid #fecaca; background: #fff1f2; color: #b91c1c;

  border-radius: var(--r-xs); font-size: 13px; font-weight: 600;

}

.form-error-banner.hidden { display: none; }



/* Sidebar-note CTA visible */

.sidebar-note { cursor: pointer; transition: background 120ms ease; }

.sidebar-note:hover { background: rgba(255,255,255,0.2); }

.sidebar-note-cta {

  display: block; margin-top: 6px; padding: 4px 8px;

  background: rgba(255,255,255,0.18); border-radius: var(--r-xs);

  font-size: 11px; font-weight: 700; text-align: center; color: #fff;

}

.sidebar-note:hover .sidebar-note-cta { background: rgba(255,255,255,0.32); }



/* ── V3.41: hamburguesa móvil ──────────────────────────────────── */

.mobile-menu-toggle {

  display: none;

  position: fixed; top: 10px; left: 10px; z-index: 1200;

  width: 42px; height: 42px; border-radius: 10px;

  border: 1px solid rgba(20,40,80,0.18);

  background: #fff; color: #1e3a8a; cursor: pointer;

  font-size: 22px; line-height: 1;

  box-shadow: 0 4px 14px rgba(20,40,80,0.16);

}

.mobile-menu-close {

  display: none;

  margin-left: auto; width: 32px; height: 32px;

  border: none; background: rgba(255,255,255,0.18); color: #fff;

  border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer;

}

.mobile-menu-backdrop {

  position: fixed; inset: 0; background: rgba(10,20,40,0.45);

  z-index: 1090; backdrop-filter: blur(2px);

}

.mobile-menu-backdrop.hidden { display: none; }



@media (max-width: 768px) {

  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; }

  /* V68 (3): "position" sin !important aqui perdia contra una regla

     ".sidebar{position:sticky}" incondicional (sin media query) que hay

     mas abajo en el fichero -- misma especificidad, y esa gana por ir

     despues. El sidebar se quedaba position:sticky (visible, ocupando su

     fila en el grid) en vez de fixed/oculto, justo en el mismo hueco de

     761-768px del fix de mas abajo (un iPad en vertical). Con la columna

     de esa fila colapsada a 1 (fix de mas abajo) pero el sidebar

     "sticky" ocupando toda su altura real, el contenido se veia

     empujado una pantalla entera hacia abajo, en blanco. */

  .sidebar {

    position: fixed !important; top: 0; left: 0; height: 100vh; width: 78vw; max-width: 320px;

    transform: translateX(-100%); transition: transform 220ms ease;

    z-index: 1100; box-shadow: 6px 0 20px rgba(10,20,40,0.25);

  }

  .sidebar.mobile-open { transform: translateX(0); }

  .content { width: 100% !important; padding: 64px 12px 16px !important; }

  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }

  .top-actions { width: 100%; display: flex; gap: 6px; }

  .top-actions button { flex: 1; padding: 8px 6px; font-size: 12px; }

  .form-grid { grid-template-columns: 1fr !important; }

  .users-access-table { font-size: 12px; }

  .users-access-table th, .users-access-table td { padding: 6px 4px; }

  .mobile-perms-table { font-size: 12px; }

  .mobile-perms-table th, .mobile-perms-table td { padding: 4px 6px; }

}



/* V3.42: botón Permisos a la derecha del select Permiso app en cards trabajador */

.worker-card-perm .worker-perm-row {

  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;

}

.worker-card-perm .worker-perm-row select { flex: 1; min-width: 0; }

.worker-card-perm .worker-perm-row .btn-perms-trabajador { white-space: nowrap; padding: 6px 10px; }



/* V3.42: navegación mensual del calendario de vacaciones */

.vacation-calendar-nav {

  display: flex; align-items: center; justify-content: center;

  gap: 14px; margin-top: 12px; padding: 8px 0;

}

.vacation-calendar-nav button {

  display: inline-flex; align-items: center; justify-content: center;

  min-width: 36px; height: 36px; padding: 0 12px;

  border: 1px solid var(--line); border-radius: var(--r-xs);

  background: #fff; color: var(--fg-1); cursor: pointer;

  font-size: 18px; font-weight: 700; line-height: 1;

}

.vacation-calendar-nav button:hover { background: var(--surface-soft); }

/* V6: la nav pasa a ir ARRIBA del calendario, y el boton "Este mes" es texto:

   no puede heredar los 18px pensados para las flechas ‹ ›. */

.vacation-calendar-nav { margin-top: 0; margin-bottom: 12px; }

.vacation-calendar-nav #vacationCalendarNow { font-size: 13px; font-weight: 700; }

.vacation-calendar-nav .vacation-calendar-month-label {

  min-width: 160px; text-align: center; font-weight: 700; color: var(--fg-1);

  text-transform: capitalize;

}

@media (max-width: 768px) {

  .vacation-calendar-nav { gap: 8px; }

  .vacation-calendar-nav .vacation-calendar-month-label { min-width: 110px; font-size: 13px; }

}



/* V3.44: form Trabajadores más estrecho, lista de trabajadores ocupa más ancho */

.form-grid.workers-grid { grid-template-columns: minmax(300px, 380px) 1fr; }

@media (max-width: 980px) {

  .form-grid.workers-grid { grid-template-columns: 1fr; }

}



/* V3.44: icono ⚠️ de alerta en celdas de Hoy */

.today-alert-badge {

  display: inline-flex; align-items: center; justify-content: center;

  margin-left: 6px; color: #b45309; cursor: help; font-size: 14px;

  vertical-align: middle;

}

.today-alert-badge:hover { color: #92400e; transform: scale(1.15); }



/* V3.47/V3.48: badge ⚠️ junto a horas realizadas (hover desktop, click móvil) */

.day-total-alert-badge {

  display: inline-flex; align-items: center; justify-content: center;

  margin-left: 4px; color: #b45309; cursor: pointer; font-size: 11px;

  vertical-align: middle; line-height: 1; user-select: none;

}

.day-total-alert-badge:hover { color: #92400e; transform: scale(1.15); }

.day-total-alert-badge:active { transform: scale(0.95); }



/* V3.44: sección Incidencias */

#incidencesSection .incidences-filters {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

  gap: 10px; margin-bottom: 14px; padding: 12px; background: var(--surface-soft);

  border: 1px solid var(--line); border-radius: var(--r-sm);

}

#incidencesSection .incidences-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--fg-3); }

#incidencesSection .incidences-filters input,

#incidencesSection .incidences-filters select { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; font-size: 13px; }

#incidencesSection .incidences-summary {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

  gap: 10px; margin-bottom: 16px;

}

#incidencesSection .incidences-table {

  width: 100%; border-collapse: collapse; font-size: 13px;

}

#incidencesSection .incidences-table th {

  background: var(--surface-soft); padding: 8px 10px; text-align: left;

  border-bottom: 2px solid var(--line); font-weight: 700; color: var(--fg-2);

  position: sticky; top: 0;

}

#incidencesSection .incidences-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

#incidencesSection .incidences-table tr:hover td { background: rgba(33,99,232,0.04); }

#incidencesSection .incidence-tag {

  display: inline-block; padding: 2px 8px; border-radius: 999px;

  font-size: 11px; font-weight: 700; text-transform: uppercase;

}

.incidence-tag.tarde { background: #fef3c7; color: #92400e; }

.incidence-tag.larga { background: #ffedd5; color: #9a3412; }

.incidence-tag.abierto { background: #fecaca; color: #991b1b; }

.incidence-tag.cambio { background: #dbeafe; color: #1e40af; }

.incidence-tag.medianoche { background: #ede9fe; color: #5b21b6; }

.incidence-tag.justificante { background: #d1fae5; color: #065f46; }



/* ============================================================

   V3.45 — Mejoras estéticas

   ============================================================ */



/* Chip de color por rol en sidebar */

.role-chip {

  display: inline-block; padding: 3px 10px; margin-top: 6px;

  border-radius: 999px; font-size: 11px; font-weight: 800;

  letter-spacing: 0.04em; text-transform: uppercase;

  color: #fff; line-height: 1.4;

}

.role-chip-admin { background: #1e3a8a; }

.role-chip-rrhh { background: #047857; }

.role-chip-consulta { background: #475569; }

.role-chip-responsable_obra { background: #c2410c; }

.role-chip-trabajador { background: #6b7280; }



/* Iconos PDF/Excel en top-actions */

.export-btn { display: inline-flex; align-items: center; gap: 6px; }

.export-btn .export-icon { font-size: 16px; line-height: 1; }

.export-btn-pdf { background: linear-gradient(135deg, #b91c1c, #7f1d1d); border-color: #7f1d1d; color: #fff; }

.export-btn-pdf:hover { background: linear-gradient(135deg, #991b1b, #7f1d1d); }

.export-btn-excel { background: linear-gradient(135deg, #047857, #064e3b); border-color: #064e3b; color: #fff; }

.export-btn-excel:hover { background: linear-gradient(135deg, #065f46, #064e3b); }



/* Snackbar con colores según tipo */

.notice {

  position: fixed; left: 50%; bottom: 24px; top: auto; transform: translateX(-50%);

  z-index: 2000; min-width: 260px; max-width: 90vw;

  padding: 12px 18px; border-radius: 10px;

  background: #1f2937; color: #fff; font-weight: 600; font-size: 14px;

  box-shadow: 0 10px 32px rgba(15,23,42,0.32);

  display: flex; align-items: center; gap: 10px;

  border-left: 4px solid #94a3b8;

  animation: noticeSlideUp 240ms ease-out;

}

@keyframes noticeSlideUp {

  from { transform: translate(-50%, 20px); opacity: 0; }

  to { transform: translate(-50%, 0); opacity: 1; }

}

.notice.notice-success { background: #065f46; border-left-color: #34d399; }

.notice.notice-success::before { content: '✅'; }

.notice.notice-error { background: #991b1b; border-left-color: #fca5a5; }

.notice.notice-error::before { content: '⚠️'; }

.notice.notice-warning { background: #92400e; border-left-color: #fbbf24; }

.notice.notice-warning::before { content: '⚠️'; }

.notice.notice-info::before { content: 'ℹ️'; }

.notice.hidden { display: none; }



/* Loading spinner en botones */

.btn-loading { position: relative; pointer-events: none; opacity: 0.85; }

.btn-loading::after {

  content: ''; position: absolute; right: 12px; top: 50%;

  width: 14px; height: 14px; margin-top: -7px;

  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;

  border-radius: 50%; animation: btnSpin 700ms linear infinite;

}

@keyframes btnSpin { to { transform: rotate(360deg); } }



/* Zebra striping en tablas de permisos por rol */

.mobile-perms-table { width: 100%; border-collapse: collapse; }

.mobile-perms-table thead th {

  position: sticky; top: 0; z-index: 1;

  background: var(--surface-soft); color: var(--fg-2);

  border-bottom: 2px solid var(--line); padding: 8px 6px;

  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;

}

.mobile-perms-table tbody tr:nth-child(even) td { background: rgba(33,99,232,0.04); }

.mobile-perms-table tbody tr:hover td { background: rgba(33,99,232,0.09); }

.mobile-perms-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }

.mobile-perms-table td:first-child { font-weight: 700; color: var(--fg-1); }



/* Barra de progreso en saldos de vacaciones */

.vacation-balance-card { position: relative; }

.vacation-balance-bar {

  grid-column: 1 / -1; display: flex; height: 12px; margin-top: 8px;

  border-radius: 6px; overflow: hidden; background: #e2e8f0;

  border: 1px solid var(--line);

}

.vacation-balance-bar > span { display: block; height: 100%; transition: width 240ms ease; }

.vacation-balance-bar .bar-aprobados { background: linear-gradient(90deg, #2563eb, #1d4ed8); }

.vacation-balance-bar .bar-pendientes { background: linear-gradient(90deg, #f59e0b, #d97706); }

.vacation-balance-bar .bar-restantes { background: linear-gradient(90deg, #10b981, #047857); }

.vacation-balance-bar-legend {

  grid-column: 1 / -1; display: flex; gap: 12px; margin-top: 4px;

  font-size: 11px; color: var(--fg-3);

}

.vacation-balance-bar-legend span { display: inline-flex; align-items: center; gap: 4px; }

.vacation-balance-bar-legend i {

  width: 10px; height: 10px; border-radius: 3px; display: inline-block;

}

/* V6: la leyenda unica de la cabecera. No esta dentro del grid de la tarjeta,

   asi que no hereda el grid-column de arriba. */

.vacation-balance-legend-top {

  grid-column: auto; margin: 0 0 10px; padding: 8px 12px;

  background: #f8fbff; border: 1px solid var(--line); border-radius: var(--r-sm);

  font-size: 12px;

}



/* Calendario vacaciones con color por trabajador */

.vacation-calendar i[data-worker-color] {

  background-color: var(--worker-color, #94a3b8) !important;

  border: 1px solid rgba(0,0,0,0.08);

}







/* ── V3.52 CONFIG INCIDENCIAS (Usuarios) ─────────────────────────── */

.incidence-types-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 18px; padding: 6px 0; }

.incidence-type-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-1); cursor: pointer; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: #fff; }

.incidence-type-row:hover { background: #f8fbff; }

.incidence-type-row input { width: 16px; height: 16px; accent-color: var(--green, #0f9f7a); flex: 0 0 auto; }





.partes-summary-grid {

  margin: 0 0 14px;

  grid-template-columns: repeat(4, minmax(120px, 1fr));

}



.partes-summary-grid .metric {

  padding: 14px 16px;

}



.partes-summary-grid .metric strong {

  font-size: 22px;

}



.day-total .day-total-parte {

  display: inline-flex;

  justify-content: flex-end;

  align-items: baseline;

  gap: 5px;

  margin-top: 6px;

  color: var(--muted);

  font-size: 12px;

  white-space: nowrap;

}



.day-total .day-total-parte strong {

  margin: 0;

  color: var(--ink);

  font-size: 14px;

}



.admin-setting-card .toggle-row {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 0 2px;

  font-weight: 700;

}



.admin-setting-card .toggle-row input {

  width: 18px;

  height: 18px;

}





/* V partes: resumen tipo trabajadores, no estilo conversaciones/documentos */

#partesSection .partes-filters {

  display: grid;

  grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(150px, 1fr));

  gap: 14px;

  align-items: end;

}

#partesSection .partes-filters label {

  display: flex;

  flex-direction: column;

  gap: 6px;

  color: var(--muted);

  font-weight: 700;

  font-size: 13px;

}

#partesSection .partes-filters input,

#partesSection .partes-filters select {

  height: 44px;

  border-radius: 10px;

  border: 1px solid var(--line);

  background: rgba(255,255,255,.92);

  padding: 0 12px;

  color: var(--text);

  font-weight: 700;

}

.partes-table-panel {

  margin-top: 16px;

}

.partes-table-wrap {

  overflow: auto;

  max-height: calc(100vh - 380px);

  border: 1px solid var(--line);

  border-radius: 14px;

  background: rgba(255,255,255,.72);

}

.partes-table {

  width: 100%;

  min-width: 980px;

  border-collapse: collapse;

  font-size: 14px;

}

.partes-table th,

.partes-table td {

  padding: 12px 14px;

  border-bottom: 1px solid var(--line);

  text-align: left;

  vertical-align: top;

}

.partes-table th {

  position: sticky;

  top: 0;

  z-index: 1;

  background: #f7faff;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: .04em;

  font-size: 12px;

}

.partes-table tbody tr:hover {

  background: rgba(67, 110, 238, .06);

}

.partes-table .num {

  text-align: right;

  font-variant-numeric: tabular-nums;

  font-weight: 800;

}

.parte-diff-ok { color: #15915b; }

.parte-diff-warn { color: #b7791f; }

.parte-diff-bad { color: #c2410c; }

.parte-status-pill {

  display: inline-flex;

  align-items: center;

  border-radius: 999px;

  padding: 4px 9px;

  background: #eef4ff;

  color: #294ba8;

  font-weight: 800;

  font-size: 12px;

}

.day-total .day-total-parte {

  border: 1px solid var(--line);

  background: #fff;

  color: var(--text);

  border-radius: 999px;

  padding: 5px 9px;

  cursor: pointer;

  font-size: 12px;

  font-weight: 800;

  display: inline-flex;

  gap: 5px;

  align-items: center;

  justify-content: center;

  align-self: flex-end;

  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);

}

.day-total .day-total-parte:hover {

  border-color: #8aa7ee;

  color: #294ba8;

}

@media (max-width: 900px) {

  #partesSection .partes-filters {

    grid-template-columns: 1fr;

  }

  .partes-table-wrap {

    max-height: none;

  }

}



.partes-subs-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--fg-2); cursor: pointer; white-space: nowrap; padding-bottom: 10px; }

.partes-subs-tick input { width: 16px; height: 16px; }

.incidencias-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--fg-2); cursor: pointer; white-space: nowrap; padding-bottom: 10px; }

.incidencias-tick input { width: 16px; height: 16px; }

.incidencias-toggle-button:disabled { opacity: 0.45; cursor: not-allowed; }



#partesSection .partes-search-control {

  min-width: min(420px, 100%);

  flex: 1 1 260px;

}



#partesSection .partes-monthly-panel {

  margin-top: 16px;

}



#partesSection #partesList {

  margin-top: 12px;

}



#partesSection .monthly-scroll {

  max-height: calc(100vh - 360px);

  overflow: auto;

}



.sr-only {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



/* ============================================================

   V4 — pulido moderno general

   ============================================================ */

body {

  background:

    radial-gradient(circle at 18% -8%, rgba(14,165,233,.18), transparent 32%),

    radial-gradient(circle at 90% 8%, rgba(99,102,241,.16), transparent 28%),

    linear-gradient(140deg, #f4f8ff 0%, #eef4fb 48%, #f8fbff 100%);

}

.content { position: relative; }

.topbar, .panel, .form-panel, .list-panel, .metric, .today-overview article, .worker-card, .mini-list > *, .work-card, .partes-table-wrap {

  border: 1px solid rgba(203,213,225,.82);

  background: rgba(255,255,255,.92);

  box-shadow: 0 18px 40px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.75);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

}

.topbar {

  position: sticky;

  top: 0;

  z-index: 35;

  border-radius: 0 0 22px 22px;

  margin: -24px -24px 22px;

  padding: 20px 24px;

}

.nav-item {

  position: relative;

  overflow: hidden;

  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;

}

.nav-item:hover { transform: translateX(2px); }

.nav-item.active {

  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(15,23,42,.16);

}

button, .export-btn, .secondary-button {

  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;

}

button:hover, .export-btn:hover, .secondary-button:hover { transform: translateY(-1px); }

button:active, .export-btn:active, .secondary-button:active { transform: translateY(0) scale(.99); }

.metric strong, .summary-grid strong { letter-spacing: -.03em; }

.metric:hover {

  transform: translateY(-2px);

  box-shadow: 0 22px 46px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);

}

input, select {

  background: rgba(255,255,255,.94);

  border-color: rgba(203,213,225,.9);

}

input:focus, select:focus {

  border-color: #2563eb;

  box-shadow: 0 0 0 4px rgba(37,99,235,.12), 0 10px 24px rgba(37,99,235,.08);

}

.monthly-table, .partes-table, .users-access-table, #incidencesSection .incidences-table {

  border-collapse: separate;

  border-spacing: 0;

  overflow: hidden;

  border-radius: 16px;

}

.monthly-table th, .partes-table th, .users-access-table th, #incidencesSection .incidences-table th {

  background: linear-gradient(135deg, #0f172a, #1e3a8a);

  color: #fff;

  border-bottom: 0;

}

.monthly-table tbody tr:hover td, .partes-table tbody tr:hover td, .users-access-table tbody tr:hover td {

  background: #eef6ff;

}

.export-btn-excel {

  box-shadow: 0 10px 24px rgba(4,120,87,.22);

}

.export-btn-pdf {

  box-shadow: 0 10px 24px rgba(185,28,28,.18);

}

@media (max-width: 900px) {

  .topbar {

    margin: -16px -16px 18px;

    padding: 18px 16px 16px 58px;

    border-radius: 0 0 18px 18px;

  }

}



/* =====================================================================

   V5.00 — Mockup-style refresh (panel web)

   Mantiene secciones, resúmenes y menús actuales.

   ===================================================================== */



:root {

  --bg: #eef3fa;

  --bg-soft: #f6f9fd;

  --surface: rgba(255,255,255,0.97);

  --surface-soft: #f8fbff;

  --surface-tint: #eef4ff;

  --line: #dce5f1;

  --line-strong: #ccd8e9;

  --fg-1: #15243b;

  --fg-2: #3f536f;

  --fg-3: #6b7c93;

  --fg-4: #9ca9bc;

  --blue: #2b6ff3;

  --blue-soft: #ecf3ff;

  --blue-ink: #1748af;

  --green: #1ab07a;

  --green-soft: #e9fbf4;

  --amber: #e7a631;

  --amber-soft: #fff8e8;

  --red: #ef6767;

  --red-soft: #fff0f1;

  --grad-sidebar: linear-gradient(180deg, #0e1d4a 0%, #16357b 44%, #1f5bde 100%);

  --grad-hero: linear-gradient(135deg, #101f4b 0%, #255de1 100%);

  --shadow-2: 0 14px 28px rgba(18, 36, 65, 0.07);

  --shadow-3: 0 20px 38px rgba(18, 36, 65, 0.08);

  --shadow-4: 0 28px 52px rgba(18, 36, 65, 0.12);

  --r-sm: 10px;

  --r-md: 14px;

  --r-lg: 18px;

  --r-xl: 24px;

}



body {

  background:

    radial-gradient(circle at top left, rgba(95, 138, 255, 0.14), transparent 24%),

    linear-gradient(180deg, #eef3fa 0%, #edf2f9 100%);

}



.login-brand-panel {

  background:

    radial-gradient(circle at 18% 20%, rgba(107,114,255,.30) 0%, transparent 36%),

    radial-gradient(circle at 84% 78%, rgba(14,165,233,.24) 0%, transparent 30%),

    linear-gradient(160deg, #0f172a 0%, #16275a 46%, #11337c 100%);

}

.login-form-panel { background: linear-gradient(180deg, #f7faff 0%, #f3f7fc 100%); }

.login-card button[type=submit] { background: var(--grad-hero); box-shadow: 0 16px 30px rgba(37,93,225,0.24); }



.app {

  display: grid;

  grid-template-columns: 300px minmax(0, 1fr);

  min-height: 100vh;

}

.sidebar {

  position: sticky;

  top: 0;

  align-self: start;

  height: 100vh;

  padding: 18px 16px 16px;

  background: var(--grad-sidebar);

  color: #fff;

  box-shadow: 18px 0 40px rgba(11, 30, 72, 0.16);

}

.sidebar-head {

  padding: 6px 4px 18px;

  border-bottom: 1px solid rgba(255,255,255,0.12);

  margin-bottom: 18px;

}

.sidebar-head strong, .sidebar-head span { color: #fff; }

.brand-mark.small {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  background: linear-gradient(135deg, #fff 0%, #aee8ff 48%, #6fd5ff 100%);

  color: #0f1d47;

  box-shadow: 0 16px 32px rgba(11, 30, 72, 0.24);

}

.nav {

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.nav-group-label {

  padding: 8px 12px 2px;

  color: rgba(214,227,255,0.68);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.nav-item {

  position: relative;

  justify-content: flex-start;

  min-height: 46px;

  padding: 0 16px 0 46px;

  border-radius: 14px;

  border: 1px solid transparent;

  background: transparent;

  color: rgba(245,249,255,0.84);

  font-weight: 700;

}

.nav-item::before {

  position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 15px;

  opacity: 0.95;

}

.nav-item[data-section="today"]::before { content: "🏠"; }

.nav-item[data-section="dashboard"]::before { content: "👤"; }

.nav-item[data-section="stats"]::before { content: "📈"; }

.nav-item[data-section="incidences"]::before { content: "⚠️"; }

.nav-item[data-section="monthly"]::before { content: "📅"; }

.nav-item[data-section="vacations"]::before { content: "🌴"; }

.nav-item[data-section="workers"]::before { content: "👥"; }

.nav-item[data-section="works"]::before { content: "🏗️"; }

.nav-item[data-section="users"]::before { content: "🔐"; }

.nav-item[data-section="conversations"]::before { content: "💬"; }

.nav-item[data-section="partes"]::before { content: "📝"; }

.nav-item[data-section="documents"]::before { content: "📎"; }

/* V6: iconos de las dos difusiones en el MENU lateral (peticion del usuario).

   Evolution -> WhatsApp (SVG verde); Meta -> insignia "IO" de INOUT. No hay

   emoji para ninguno, por eso van como imagen/insignia y no como content-emoji. */

.nav-item[data-section="difusionEvo"]::before {

  content: ""; display: block; width: 18px; height: 18px; opacity: 1;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.6c1.7.9 3.7 1.4 5.8 1.4h.1c6.6 0 12-5.4 12-12S24.7 3 18 3h-2z'/%3E%3Cpath fill='%23ffffff' d='M12.5 9.5c-.3-.6-.5-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.3 1.4 3.5c.2.2 2.4 3.8 5.9 5.1 2.9 1.1 3.5.9 4.2.9.6-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.4-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2-.2.3-.8 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.5-.6.1-.2.2-.3.3-.5.1-.2 0-.4 0-.6-.1-.1-.7-1.8-1-2.4z'/%3E%3C/svg%3E") center/contain no-repeat;

}

.nav-item[data-section="partesFirmados"]::before { content: "📋"; }

.nav-item[data-section="subcontratas"]::before { content: "🏭"; }

/* V13.5: faltaban los iconos de estas dos hojas y quedaban descolgadas en el menú */

.nav-item[data-section="documentosFirma"]::before { content: "✍️"; }

.nav-item[data-section="nubeConexiones"]::before { content: "☁️"; }

.nav-item[data-section="difusionMeta"]::before {

  content: "IO"; width: 18px; height: 18px; border-radius: 5px; opacity: 1;

  display: flex; align-items: center; justify-content: center;

  background: linear-gradient(135deg, #ffffff 0%, #9ee7ff 45%, #65d9ff 100%);

  color: #0f172a; font-size: 8px; font-weight: 900; letter-spacing: .2px;

}

.nav-item:hover {

  background: rgba(255,255,255,0.08);

  color: #fff;

}

.nav-item.active {

  background: rgba(255,255,255,0.14);

  border-color: rgba(255,255,255,0.12);

  color: #fff;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 22px rgba(10,28,68,0.18);

}

.sidebar-note {

  margin-top: 18px;

  border-radius: 20px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.10);

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);

}

.sidebar-note span, .sidebar-note strong { color: #fff; }

.logout {

  margin-top: 12px;

  border-radius: 14px;

  background: rgba(255,255,255,0.1);

  border: 1px solid rgba(255,255,255,0.12);

  color: #fff;

}



.content {

  padding: 20px 22px 28px;

}

.topbar {

  position: sticky;

  top: 12px;

  z-index: 15;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;

  padding: 18px 22px;

  border-radius: 24px;

  border: 1px solid rgba(220,229,241,0.94);

  background: rgba(255,255,255,0.86);

  box-shadow: var(--shadow-3);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

}

.page-kicker {

  display: inline-flex;

  margin-bottom: 6px;

  padding: 6px 10px;

  border-radius: 999px;

  background: var(--blue-soft);

  color: var(--blue-ink);

  font-size: 12px;

  font-weight: 800;

}

.topbar h1 { font-size: 30px; }

.topbar p { margin-top: 4px; }

.top-actions {

  display: flex;

  align-items: center;

  gap: 10px;

}

.top-date-pill {

  /* V6: misma altura que los botones PDF/Excel (44px) y contenido centrado;

     antes solo tenia padding y quedaba mas baja y descentrada al lado de ellos. */

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 44px;

  padding: 0 16px;

  border-radius: 14px;

  background: #f8fbff;

  border: 1px solid var(--line);

  color: var(--fg-2);

  font-weight: 700;

  font-variant-numeric: tabular-nums;

}

.export-btn {

  min-width: 110px;

  height: 44px;

  border-radius: 14px;

  border: 1px solid var(--line);

  background: #fff;

  box-shadow: var(--shadow-2);

}

.export-btn-pdf { background: linear-gradient(180deg, #fff6f7 0%, #fff 100%); }

.export-btn-excel { background: linear-gradient(180deg, #f1fff7 0%, #fff 100%); }

.notice {

  border-radius: 18px;

  border: 1px solid var(--line);

  box-shadow: var(--shadow-2);

}

.section {

  display: none;

}

.section.active {

  display: block;

  animation: fadeUp .18s ease-out;

}

@keyframes fadeUp {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: translateY(0); }

}

.panel, .list-panel, .metric, .worker-card, .conversation-sidebar, .documents-sidebar, .users-grid > article, .admin-setting-card {

  border-radius: 22px;

  border: 1px solid rgba(220,229,241,0.95);

  background: rgba(255,255,255,0.97);

  box-shadow: var(--shadow-2);

}

.panel, .list-panel { padding: 20px; }

.summary-grid {

  gap: 16px;

}

.metric {

  min-height: 112px;

  padding: 20px;

  border-radius: 22px;

  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);

}

.metric span { color: var(--fg-3); text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; }

.metric strong { margin-top: 8px; font-size: 30px; line-height: 1.1; }

.metric.warn { background: linear-gradient(180deg, #fff9ed 0%, #fff 100%); }

.clickable-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }

.today-overview, .stats-grid, .details, .users-grid {

  gap: 16px;

}

.today-head, .panel-head, .monthly-head, .conversation-main-head, .documents-main-head, .partes-head {

  margin-bottom: 14px;

}

.today-filterbar, .controls, .today-head, .monthly-head, .partes-head {

  border-radius: 20px;

}

.controls {

  padding: 16px 18px;

  border: 1px solid rgba(220,229,241,0.95);

  background: rgba(255,255,255,0.93);

  box-shadow: var(--shadow-2);

}

input, select {

  min-height: 44px;

  border-radius: 14px;

  border: 1px solid var(--line);

  background: #fff;

}

button {

  min-height: 42px;

  border-radius: 14px;

}

.primary-button, .login-card button[type=submit], .worker-perms-save, .modal-primary, .conversation-load-more.is-loading, .vacation-primary-button {

  background: var(--grad-hero);

  border: none;

  color: #fff;

  box-shadow: 0 16px 28px rgba(37,93,225,0.22);

}

.secondary-button, .segmented-control button, .nav-buttons button, .list-actions button {

  background: #f9fbff;

  border: 1px solid var(--line);

  color: var(--fg-1);

}

.segmented-control {

  padding: 4px;

  border-radius: 16px;

  background: #f5f8fc;

  border: 1px solid var(--line);

}

.segmented-control button {

  border: 0;

  min-width: 120px;

}

.segmented-control button.active {

  background: var(--grad-hero);

  color: #fff;

  box-shadow: 0 12px 24px rgba(37,93,225,0.2);

}

.today-workers, .monthly-body, .conversation-messages, .documents-list, .workers-list, .works-list, .vacations-list, .vacation-requests-list {

  display: grid;

  gap: 14px;

}

.table-card, table {

  border-collapse: separate;

  border-spacing: 0;

}

.monthly-table, .partes-table, .users-table, .workers-table {

  width: 100%;

}

.monthly-table th, .monthly-table td, .partes-table th, .partes-table td, .worker-table th, .worker-table td, table th, table td {

  padding: 12px 14px;

  border-bottom: 1px solid #edf2f8;

}

.monthly-table thead th, .partes-table thead th, table thead th {

  position: sticky;

  top: 0;

  background: #f5f8ff;

  z-index: 1;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--fg-2);

}

.partes-monthly-panel .monthly-body,

.monthly-panel .monthly-body {

  border-radius: 18px;

  border: 1px solid var(--line);

  overflow: auto;

  background: #fff;

}

.partes-summary-table-wrap table,

.summary-table-wrap table { min-width: 880px; }

.role-chip {

  border-radius: 999px;

}

.empty-state {

  border-radius: 18px;

  background: linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%);

  border: 1px dashed var(--line-strong);

}

.mobile-menu-toggle, .mobile-menu-close {

  border-radius: 14px;

}



@media (max-width: 1180px) {

  .app { grid-template-columns: 270px minmax(0,1fr); }

  .topbar { flex-direction: column; align-items: stretch; }

  .top-actions { justify-content: flex-start; flex-wrap: wrap; }

}



@media (max-width: 960px) {

  .content { padding: 16px; }

  .topbar { top: 8px; padding: 16px; }

}



@media (max-width: 760px) {

  .sidebar {

    position: fixed;

    top: 10px;

    left: 10px;

    bottom: 10px;

    height: auto;

    width: min(320px, calc(100vw - 20px));

    border-radius: 24px;

    box-shadow: 0 30px 56px rgba(10, 28, 68, 0.24);

  }

  .mobile-menu-backdrop {

    background: rgba(16,31,58,0.34);

    backdrop-filter: blur(4px);

  }

  .app { grid-template-columns: 1fr; }

  .topbar h1 { font-size: 26px; }

}



/* =====================================================================

   V6.00 — Fine finish: cabecera compacta y acabado más limpio

   ===================================================================== */



:root {

  --bg: #f0f4fa;

  --surface: rgba(255,255,255,0.985);

  --line: #dde7f3;

  --fg-1: #14233a;

  --fg-2: #40546f;

  --fg-3: #6a7a91;

  --blue: #2563eb;

  --blue-ink: #1949b6;

  --green: #14a874;

  --amber: #e69d2b;

  --red: #e85b5b;

  --grad-sidebar: linear-gradient(180deg, #0d1b45 0%, #15316f 48%, #1f57d4 100%);

  --grad-hero: linear-gradient(135deg, #12214b 0%, #255de1 100%);

  --shadow-2: 0 10px 22px rgba(18, 36, 65, 0.055);

  --shadow-3: 0 16px 32px rgba(18, 36, 65, 0.07);

  --shadow-4: 0 22px 42px rgba(18, 36, 65, 0.10);

}



.app {

  grid-template-columns: 276px minmax(0, 1fr);

}

.sidebar {

  padding: 14px 14px 14px;

}

.sidebar-head {

  padding: 4px 4px 14px;

  margin-bottom: 12px;

}

.brand-mark.small {

  width: 38px;

  height: 38px;

  border-radius: 13px;

}

.nav {

  gap: 6px;

}

.nav-group-label {

  padding: 6px 10px 0;

  font-size: 10px;

}

.nav-item {

  min-height: 40px;

  padding-left: 42px;

  border-radius: 13px;

  font-size: 13px;

}

.nav-item::before {

  left: 14px;

  font-size: 14px;

}

.sidebar-note {

  margin-top: 12px;

  padding: 13px;

  border-radius: 17px;

}

.logout {

  min-height: 40px;

  border-radius: 13px;

}



.content {

  padding: 14px 18px 24px;

}

.topbar {

  top: 10px;

  min-height: 76px;

  padding: 12px 16px;

  margin-bottom: 14px;

  border-radius: 20px;

  box-shadow: 0 12px 28px rgba(18, 36, 65, 0.065);

}

.page-kicker {

  margin-bottom: 4px;

  padding: 4px 9px;

  font-size: 10.5px;

}

.topbar h1 {

  font-size: 24px;

  letter-spacing: -0.03em;

}

.topbar p {

  margin-top: 2px;

  font-size: 13px;

}

.top-actions {

  gap: 8px;

}

.top-date-pill {

  height: 40px;

  padding: 0 12px;

  border-radius: 13px;

  font-size: 13px;

}

.export-btn {

  min-width: 92px;

  height: 40px;

  border-radius: 13px;

  font-size: 13px;

}



.panel,

.list-panel,

.metric,

.worker-card,

.conversation-sidebar,

.documents-sidebar,

.users-grid > article,

.admin-setting-card {

  border-radius: 20px;

  box-shadow: 0 10px 22px rgba(18, 36, 65, 0.052);

}

.panel,

.list-panel {

  padding: 16px;

}

.summary-grid {

  gap: 12px;

}

.metric {

  min-height: 92px;

  padding: 16px;

}

.metric span {

  font-size: 10.5px;

}

.metric strong {

  margin-top: 6px;

  font-size: 26px;

}

.today-overview,

.stats-grid,

.details,

.users-grid {

  gap: 12px;

}

.controls {

  padding: 13px 15px;

  border-radius: 18px;

  box-shadow: 0 8px 20px rgba(18, 36, 65, 0.05);

}

input,

select {

  min-height: 40px;

  border-radius: 13px;

  font-size: 13px;

}

button {

  min-height: 40px;

  border-radius: 13px;

  font-size: 13px;

}

.segmented-control {

  border-radius: 14px;

}

.segmented-control button {

  min-width: 104px;

}

.monthly-table th,

.monthly-table td,

.partes-table th,

.partes-table td,

.worker-table th,

.worker-table td,

table th,

table td {

  padding: 9px 10px;

  font-size: 12.5px;

}

.monthly-table thead th,

.partes-table thead th,

table thead th {

  font-size: 10.5px;

}

.partes-monthly-panel .monthly-body,

.monthly-panel .monthly-body {

  border-radius: 16px;

}

.empty-state {

  border-radius: 16px;

  padding: 22px;

}



.login-form-header h1 {

  font-size: 24px;

}

.login-card small {

  color: #64748b;

  line-height: 1.45;

}



@media (max-width: 1180px) {

  .app {

    grid-template-columns: 260px minmax(0,1fr);

  }

  .topbar {

    min-height: auto;

  }

}



@media (max-width: 760px) {

  .content {

    padding: 12px;

  }

  .sidebar {

    padding: 14px;

  }

  .topbar {

    top: 8px;

    padding: 12px;

  }

  .topbar h1 {

    font-size: 22px;

  }

}



/* =====================================================================

   V7 — Pulido general + resumen partes con vista tabla y resumen

   ===================================================================== */



.topbar {

  padding: 12px 16px;

  border-radius: 20px;

  gap: 14px;

}

.topbar h1 {

  font-size: 25px;

  line-height: 1.1;

}

.topbar p {

  margin-top: 2px;

  font-size: 13px;

  color: var(--fg-3);

}

.page-kicker {

  margin-bottom: 4px;

  padding: 4px 8px;

  font-size: 11px;

}

.top-date-pill {

  padding: 9px 12px;

  min-height: 38px;

  font-size: 13px;

}

.export-btn {

  min-width: 96px;

  height: 40px;

  border-radius: 12px;

}

.content {

  padding-top: 14px;

}



.form-grid.workers-grid {

  grid-template-columns: 320px minmax(0, 1fr);

  gap: 16px;

  align-items: start;

}

.form-panel {

  border-radius: 20px;

  padding: 18px;

}

.form-panel h2,

.list-panel h2,

.panel h2 {

  font-size: 22px;

  line-height: 1.15;

  margin-bottom: 6px;

}

.form-panel label,

.controls label {

  gap: 6px;

}

.form-panel input,

.form-panel select,

.controls input,

.controls select {

  min-height: 42px;

  border-radius: 12px;

}

.form-panel button[type="submit"] {

  min-height: 42px;

  border-radius: 12px;

}

.import-control {

  display: grid;

  gap: 6px;

}

.import-control span {

  font-size: 12px;

  color: var(--fg-3);

}

.workers-list-head {

  display: grid;

  grid-template-columns: auto minmax(280px, 1fr) auto;

  gap: 12px;

  align-items: center;

  margin-bottom: 14px;

}

.workers-list-head h2 { margin: 0; }

.workers-count {

  justify-self: end;

  padding: 6px 10px;

  border-radius: 999px;

  background: var(--blue-soft);

  color: var(--blue-ink);

  font-size: 12px;

  font-weight: 700;

}

.worker-list-cards {

  display: grid;

  gap: 10px;

}

.worker-card,

.worker-list-card,

.worker-line-card {

  border-radius: 18px;

}



.partes-search-control {

  min-width: 220px;

}

.partes-kpis .metric {

  min-height: 96px;

  padding: 16px 18px;

}

.partes-kpis .metric strong {

  font-size: 28px;

}

.partes-view-switch-wrap {

  display: flex;

  justify-content: flex-end;

  margin: 14px 0;

}

.partes-view-switch {

  padding: 4px;

  border-radius: 16px;

  background: #f5f8fc;

  border: 1px solid var(--line);

}

.partes-summary-panel,

.partes-monthly-panel {

  padding: 18px;

}

.partes-summary-compact .monthly-scroll,

.partes-monthly-panel .monthly-scroll {

  border-radius: 18px;

  border: 1px solid var(--line);

  overflow: auto;

  background: #fff;

}

.partes-summary-compact-table,

.partes-summary-table {

  width: 100%;

  min-width: 820px;

}

.partes-summary-compact-table th,

.partes-summary-compact-table td,

.partes-summary-table th,

.partes-summary-table td {

  padding: 12px 14px;

  border-bottom: 1px solid #edf2f8;

}

.partes-summary-compact-table thead th,

.partes-summary-table thead th {

  position: sticky;

  top: 0;

  z-index: 1;

  background: #f7f9fd;

  color: var(--fg-2);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}

.partes-summary-compact-table tbody tr:hover,

.partes-summary-table tbody tr:hover {

  background: #fbfdff;

}

.partes-summary-compact-table td strong,

.partes-summary-table td strong {

  color: var(--fg-1);

}

.partes-summary-compact-table td.is-ok,

.partes-summary-table td.ok {

  color: #12845f;

  background: rgba(26,176,122,0.06);

}

.partes-summary-compact-table td.is-warn {

  color: #8b6c18;

  background: rgba(231,166,49,0.08);

}

.partes-summary-compact-table td.is-bad,

.partes-summary-table td.open {

  color: #c94b4b;

  background: rgba(239,103,103,0.08);

}

.monthly-legend {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 12px;

  color: var(--fg-3);

  font-size: 12px;

}

.monthly-legend .ok { color: #12845f; }

.monthly-legend .open { color: #c94b4b; }



@media (max-width: 1024px) {

  .form-grid.workers-grid {

    grid-template-columns: 1fr;

  }

  .workers-list-head {

    grid-template-columns: 1fr;

    align-items: stretch;

  }

  .workers-count {

    justify-self: start;

  }

}



@media (max-width: 760px) {

  .topbar {

    padding: 10px 12px;

    border-radius: 16px;

  }

  .topbar h1 { font-size: 22px; }

  .partes-view-switch-wrap {

    justify-content: stretch;

  }

  .partes-view-switch {

    width: 100%;

  }

}



/* =====================================================================

   V8 — Acabado profesional completo

   ===================================================================== */



:root {

  --panel-max: 1540px;

}



body {

  background:

    radial-gradient(circle at top left, rgba(95, 138, 255, 0.08), transparent 24%),

    linear-gradient(180deg, #f4f7fb 0%, #eff3f8 100%);

  color: var(--fg-1);

}



.app {

  max-width: 1780px;

  margin: 0 auto;

}



.sidebar {

  padding: 16px 14px 14px;

  background: linear-gradient(180deg, #09183e 0%, #102a63 42%, #1848aa 100%);

}

.sidebar-head {

  margin-bottom: 14px;

  padding-bottom: 14px;

}

.sidebar-head strong { font-size: 24px; letter-spacing: -0.02em; }

.sidebar-head span { opacity: .82; font-size: 13px; }

.nav { gap: 6px; }

.nav-item {

  min-height: 42px;

  padding-left: 42px;

  font-size: 14px;

  border-radius: 12px;

}

.nav-item::before { left: 14px; font-size: 14px; }

.nav-item.active {

  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10));

  box-shadow: 0 10px 20px rgba(8, 24, 63, 0.18);

}

.sidebar-note {

  border-radius: 16px;

  padding: 12px;

}

.logout {

  min-height: 42px;

  border-radius: 12px;

}



.content {

  padding: 14px 16px 24px;

}

.topbar {

  top: 8px;

  padding: 10px 14px;

  border-radius: 18px;

  margin-bottom: 14px;

  box-shadow: 0 10px 24px rgba(18,36,65,0.06);

}

.topbar-copy { display: grid; gap: 2px; }

.topbar h1 {

  font-size: 24px;

  letter-spacing: -0.03em;

}

.page-kicker {

  width: fit-content;

  margin-bottom: 2px;

  padding: 4px 8px;

  background: #edf3ff;

}

.top-actions { gap: 8px; }

.top-date-pill, .export-btn {

  min-height: 38px;

  border-radius: 12px;

}

.export-btn { min-width: 88px; font-size: 13px; }

.notice { border-radius: 14px; }



.section {

  max-width: var(--panel-max);

}

.panel,

.list-panel,

.form-panel,

.metric,

.controls,

.worker-card,

.work-card,

.user-card,

.modal-content,

.conversation-sidebar,

.documents-sidebar {

  box-shadow: 0 10px 26px rgba(18,36,65,0.05);

}

.panel,

.list-panel,

.form-panel,

.controls {

  border-radius: 18px;

}

.panel-head,

.today-head,

.monthly-head,

.workers-list-head {

  gap: 12px;

}

.form-panel,

.list-panel,

.panel { padding: 16px; }

.form-panel h2,

.list-panel h2,

.panel h2 {

  font-size: 20px;

  letter-spacing: -0.02em;

}

.form-panel > p,

.list-panel > p,

.panel-head p { font-size: 13px; color: var(--fg-3); }

input,

select,

textarea,

button {

  font-family: inherit;

}

input,

select,

textarea {

  min-height: 40px;

  border-radius: 12px;

  border-color: #d9e3ef;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);

}

input:focus,

select:focus,

textarea:focus {

  outline: none;

  border-color: #8eb4ff;

  box-shadow: 0 0 0 4px rgba(43,111,243,0.10);

}

button {

  min-height: 40px;

  border-radius: 12px;

  font-weight: 700;

}

.primary-button,

.form-panel button[type="submit"],

button[type="submit"] {

  background: linear-gradient(135deg, #1d51d4 0%, #2c6ef3 100%);

}

.secondary-button {

  background: #f8fbff;

}

/* V115: la regla genérica de botones de .form-panel tenía más especificidad
   que .primary-button y pintaba de oscuro los botones «Marcar…». */
.form-panel .primary-button,
.form-panel button.primary-button,
#enviarDocExtraMarcarBtn,
#enviarDocPersonalizadoMarcarBtn {
  border-color: #315eea !important;
  background: linear-gradient(135deg, #1d51d4 0%, #2c6ef3 100%) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(37, 84, 207, .18);
}
.form-panel .primary-button:hover,
#enviarDocExtraMarcarBtn:hover:not(:disabled),
#enviarDocPersonalizadoMarcarBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1747bd 0%, #245edb 100%) !important;
}
.form-panel .primary-button:disabled,
#enviarDocExtraMarcarBtn:disabled,
#enviarDocPersonalizadoMarcarBtn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.metric {

  min-height: 96px;

  padding: 16px 18px;

  border-radius: 18px;

}

.metric strong { font-size: 28px; }

.metric span { font-size: 11px; }

.summary-grid { gap: 12px; }



/* Trabajadores */

.form-grid.workers-grid {

  grid-template-columns: 330px minmax(0, 1fr);

  gap: 14px;

}

.worker-list-cards { gap: 12px; }

.worker-card {

  display: grid !important;

  grid-template-columns: minmax(240px, 1.3fr) minmax(0, 2fr) auto;

  gap: 14px;

  align-items: start;

  padding: 14px 16px;

  border-radius: 18px;

  border: 1px solid #e3ebf5;

  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);

}

.worker-card-main {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}

.worker-card-id {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}

.worker-avatar {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  font-size: 14px;

  font-weight: 800;

  color: #12315f;

  background: linear-gradient(135deg, #eff4ff, #dfe9ff);

  border: 1px solid #d9e4fb;

  flex: 0 0 auto;

}

.worker-avatar.role-admin { background: linear-gradient(135deg,#efe8ff,#ddccff); color:#5533b6; }

.worker-avatar.role-rrhh { background: linear-gradient(135deg,#e6fbf4,#cff5e7); color:#127553; }

.worker-avatar.role-responsable_obra { background: linear-gradient(135deg,#fff4e5,#ffe4b8); color:#9a5a00; }

.worker-avatar.role-consulta { background: linear-gradient(135deg,#f3f4f7,#e6e8ee); color:#4f5f79; }

.worker-card-name { min-width: 0; display: grid; gap: 2px; }

.worker-card-name strong,

.worker-card-main strong {

  font-size: 15px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.worker-card-name span {

  font-size: 12px;

  color: var(--fg-3);

}

.worker-role-chip {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 28px;

  padding: 0 10px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  border: 1px solid transparent;

  flex: 0 0 auto;

}

.worker-role-chip.role-admin { background:#efe8ff; border-color:#dfd1ff; color:#5b38c8; }

.worker-role-chip.role-rrhh { background:#e6fbf4; border-color:#c9f0df; color:#0f8157; }

.worker-role-chip.role-responsable_obra { background:#fff4e5; border-color:#ffe1b0; color:#aa6300; }

.worker-role-chip.role-consulta { background:#f0f2f7; border-color:#e1e6ef; color:#4f5f79; }

.worker-role-chip.role-trabajador,

.worker-role-chip.role-editor { background:#edf4ff; border-color:#d8e5ff; color:#2d63d2; }

.worker-card-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  min-width: 0;

}

.worker-card-meta {

  padding: 10px 12px;

  border-radius: 14px;

  background: #f9fbff;

  border: 1px solid #e7eef8;

  min-width: 0;

}

.worker-card-meta span {

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--fg-3);

}

.worker-card-meta strong { font-size: 13px; }

.worker-card-perm .worker-perm-row {

  align-items: center;

  gap: 8px;

}

.worker-role-select,

.worker-obra-select {

  min-height: 36px;

  border-radius: 10px;

  font-size: 12px;

}

.btn-perms-trabajador {

  min-height: 36px;

  padding: 0 12px;

  border-radius: 10px;

  background: #f1f6ff;

  border-color: #d4e2fb;

}

.btn-perms-trabajador .perms-badge {

  min-width: 20px;

  height: 20px;

  display: inline-grid;

  place-items: center;

  padding: 0;

}

.btn-auto-obra {

  margin-top: 8px;

  padding: 5px 8px;

  border-radius: 10px;

  background: #fff8eb;

  border-color: #ffe0a1;

  color: #9f6300;

}

.worker-card-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

.btn-delete-worker {

  width: 38px;

  min-width: 38px;

  height: 38px;

  min-height: 38px;

  border-radius: 12px;

  background: #fff4f5;

  border: 1px solid #ffd7db;

  color: #cf4658;

  font-size: 14px;

}

.btn-delete-worker:hover {

  background: #ffecee;

  transform: translateY(-1px);

}



/* Partes / tablas */

.monthly-body,

.documents-list,

.conversation-messages,

.worker-list-scroll {

  scrollbar-width: thin;

  scrollbar-color: #c9d5e6 transparent;

}

.monthly-scroll table,

.partes-summary-compact-table,

.partes-summary-table,

.table-card table {

  font-size: 13px;

}

.monthly-scroll table thead th,

.partes-summary-compact-table thead th,

.partes-summary-table thead th,

.table-card table thead th {

  box-shadow: inset 0 -1px 0 #e7edf6;

}

.monthly-legend span,

.monthly-legend .ok,

.monthly-legend .open {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}

.conversation-count {

  padding: 6px 10px;

  border-radius: 999px;

  background: #f1f5fb;

  border: 1px solid #dde6f3;

  color: var(--fg-2);

  font-size: 12px;

  font-weight: 700;

}



/* Modales y permisos */

.modal,

.modal-backdrop {

  backdrop-filter: blur(7px);

  -webkit-backdrop-filter: blur(7px);

}

.modal-content,

.modal-card,

.worker-perms-modal,

#workerPermsModal .modal-card {

  border-radius: 24px;

  border: 1px solid #e2eaf4;

  box-shadow: 0 24px 60px rgba(18,36,65,0.18);

}

#workerPermsModal .modal-card {

  max-width: 1080px;

}

#workerPermsModal .modal-head,

.modal-header {

  padding-bottom: 12px;

  margin-bottom: 12px;

  border-bottom: 1px solid #edf2f8;

}

.worker-perms-grid,

.permissions-grid,

.perms-grid {

  gap: 12px;

}

.permission-chip,

.role-chip {

  border-radius: 999px;

}



/* Usuarios / formularios */

.users-grid,

.form-grid {

  gap: 14px;

}

.import-control input[type="file"] {

  padding: 8px 10px;

  background: #f8fbff;

}



/* Estados vacíos */

.empty-state {

  display: grid;

  place-items: center;

  gap: 6px;

  min-height: 160px;

  border-radius: 16px;

}

.empty-state strong { font-size: 16px; }

.empty-state span { max-width: 420px; text-align: center; }



/* Móvil escritorio pequeño */

@media (max-width: 1360px) {

  .worker-card {

    grid-template-columns: 1fr;

  }

  .worker-card-actions {

    justify-content: flex-start;

  }

}

@media (max-width: 1100px) {

  .worker-card-grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 780px) {

  .content { padding: 10px 10px 20px; }

  .topbar { padding: 10px 12px; }

  .form-grid.workers-grid { grid-template-columns: 1fr; }

  .worker-card-main {

    flex-direction: column;

    align-items: flex-start;

  }

}



/* =====================================================================

   V12 — Corrección visual tras revisión

   Objetivo: volver a un diseño limpio, sin solapes ni cabecera rara.

   ===================================================================== */



/* Fondo más limpio: quitamos protagonismo al patrón decorativo */

body {

  background: #f3f6fb !important;

}



/* Menú lateral sin agrupaciones */

.nav-group-label { display: none !important; }

.nav { gap: 8px !important; padding-top: 8px; }

.nav-item {

  min-height: 44px !important;

  border-radius: 12px !important;

}



/* Cabecera superior compacta, dentro de una tarjeta limpia */

.content { padding-top: 14px !important; }

.topbar {

  position: sticky !important;

  top: 10px !important;

  z-index: 20 !important;

  margin-bottom: 18px !important;

  padding: 12px 16px !important;

  border-radius: 18px !important;

  border: 1px solid #dde7f3 !important;

  background: rgba(255,255,255,0.94) !important;

  box-shadow: 0 10px 26px rgba(18,36,65,0.07) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

}

.topbar-copy { display: grid; gap: 2px; }

.page-kicker { display: none !important; }

.topbar h1 {

  margin: 0 !important;

  font-size: 26px !important;

  line-height: 1.05 !important;

  letter-spacing: -0.035em !important;

}

.topbar p {

  margin: 0 !important;

  font-size: 13px !important;

  color: #66758b !important;

}

.top-actions { gap: 8px !important; align-items: center; }

.top-date-pill,

.export-btn {

  height: 38px !important;

  min-height: 38px !important;

  border-radius: 12px !important;

}

.export-btn {

  min-width: 86px !important;

  font-size: 13px !important;

}



/* Pantalla trabajadores: formulario arriba, listado debajo para evitar solapes */

.workers-page {

  display: grid;

  gap: 16px;

}

.worker-form-panel,

.workers-list-panel {

  border-radius: 20px !important;

  border: 1px solid #dde7f3 !important;

  background: #fff !important;

  box-shadow: 0 10px 26px rgba(18,36,65,0.055) !important;

}

.worker-form-panel {

  padding: 16px !important;

  position: static !important;

  top: auto !important;

  overflow: visible !important;

}

.worker-form-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;

}

.worker-form-head h2,

.workers-list-head h2 {

  margin: 0 0 4px !important;

  font-size: 20px !important;

  letter-spacing: -0.025em;

}

.worker-form-head p,

.workers-list-head p {

  margin: 0 !important;

  color: #66758b !important;

  font-size: 13px !important;

}

.worker-form-tools {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  justify-content: flex-end;

}

.worker-form-tools .secondary-button {

  min-height: 38px !important;

  padding: 0 14px !important;

}

.import-control-compact {

  display: inline-grid;

  gap: 4px;

  min-width: 190px;

  padding: 8px 10px;

  border-radius: 12px;

  border: 1px dashed #cbd8eb;

  background: #f8fbff;

}

.import-control-compact span {

  font-size: 11px;

  color: #52657d;

  font-weight: 700;

}

.import-control-compact input[type="file"] {

  min-height: auto !important;

  height: auto !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  font-size: 11px;

}

.worker-form-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

  align-items: end;

}

.worker-form-grid label {

  display: grid;

  gap: 6px;

  min-width: 0;

}

.worker-form-grid label span {

  font-size: 12px;

  color: #52657d;

  font-weight: 700;

}

.worker-form-grid input,

.worker-form-grid select {

  width: 100%;

  min-height: 40px !important;

  height: 40px !important;

  border-radius: 12px !important;

}

.worker-form-grid input[readonly] {

  background: #f4f7fb !important;

  color: #52657d !important;

}

.worker-form-grid .field-wide {

  grid-column: span 2;

}

.worker-save-button {

  min-height: 40px !important;

  height: 40px !important;

  border-radius: 12px !important;

  background: linear-gradient(135deg, #1d51d4, #2c6ef3) !important;

  color: #fff !important;

  border: 0 !important;

  white-space: nowrap;

}



/* Listado trabajadores */

.workers-list-panel { padding: 16px !important; }

.workers-list-head {

  display: grid !important;

  grid-template-columns: minmax(240px, 1fr) minmax(260px, 390px) auto !important;

  gap: 12px !important;

  align-items: center !important;

  margin-bottom: 14px !important;

}

#workersSearch {

  width: 100%;

  min-height: 40px !important;

  height: 40px !important;

  border-radius: 12px !important;

}

.workers-count {

  justify-self: end;

  padding: 7px 12px !important;

  border-radius: 999px !important;

  background: #edf4ff !important;

  color: #245ecb !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  white-space: nowrap;

}

.worker-list-scroll {

  max-height: calc(100vh - 310px);

  overflow: auto;

  padding-right: 4px;

}

.worker-card {

  border-radius: 16px !important;

  padding: 12px 14px !important;

  background: #fff !important;

  border: 1px solid #e1eaf5 !important;

  box-shadow: none !important;

}

.worker-card:hover {

  box-shadow: 0 8px 20px rgba(18,36,65,0.055) !important;

}

.worker-card-meta {

  background: #f8fbff !important;

  border: 1px solid #e5edf7 !important;

  border-radius: 12px !important;

  padding: 9px 10px !important;

}

.worker-card-main strong,

.worker-card-name strong {

  font-size: 14px !important;

}

.worker-card-meta span {

  font-size: 10.5px !important;

}

.worker-card-meta strong {

  font-size: 12.5px !important;

}

.worker-role-select,

.worker-obra-select {

  min-height: 34px !important;

  height: 34px !important;

  border-radius: 10px !important;

  font-size: 12px !important;

}

/* V73: bug real reportado ("los botones no estan alineados" en la tabla de

   Trabajadores) -- esta regla con !important estaba pensada para la

   tarjeta de trabajador (.worker-card, layout mas antiguo/movil) pero al

   no llevar ese prefijo tambien pisaba el boton de borrar en

   .workers-management-table (la tabla real de la captura), forzandolo a

   34px de alto mientras el boton de editar datos de al lado se quedaba en

   36px (regla mas especifica de esa tabla, sin !important) -- 2px de

   diferencia que se notaba a simple vista entre los dos iconos de la

   misma fila. Acotado a .worker-card para que la tarjeta siga igual y la

   tabla deje de recibir esta altura que no le corresponde. */

.worker-card .btn-perms-trabajador,

.worker-card .btn-delete-worker {

  min-height: 34px !important;

  height: 34px !important;

}



/* Responsive */

@media (max-width: 1240px) {

  .worker-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .worker-form-grid .field-wide { grid-column: span 2; }

  .workers-list-head { grid-template-columns: 1fr !important; align-items: stretch !important; }

  .workers-count { justify-self: start; }

  .worker-list-scroll { max-height: none; }

}

@media (max-width: 760px) {

  .content { padding: 10px !important; }

  .topbar { top: 8px !important; padding: 10px 12px !important; }

  .topbar h1 { font-size: 23px !important; }

  .topbar { flex-direction: column !important; align-items: stretch !important; }

  .top-actions { justify-content: flex-start; }

  .worker-form-head { flex-direction: column; }

  .worker-form-tools { justify-content: flex-start; width: 100%; }

  .worker-form-grid { grid-template-columns: 1fr; }

  .worker-form-grid .field-wide { grid-column: auto; }

}



/* =====================================================================

   V13 — Ajuste topbar + enlaces/preview justificantes

   ===================================================================== */



/* Hacer que la cabecera superior tenga la misma presencia que los paneles inferiores */

.content {

  max-width: 1500px;

  margin: 0 auto;

}

.topbar {

  position: sticky;

  top: 10px;

  z-index: 18;

  margin: 0 0 16px;

  padding: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  border: 0 !important;

}

.topbar-main {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  width: 100%;

  padding: 14px 18px;

  border: 1px solid #dfe7f2;

  border-radius: 22px;

  background: rgba(255,255,255,0.96);

  box-shadow: 0 10px 26px rgba(18,36,65,0.05);

}

.topbar-copy {

  display: grid;

  gap: 2px;

}

.topbar h1 {

  margin: 0;

  font-size: 28px !important;

  line-height: 1.05;

  letter-spacing: -0.04em;

}

.topbar p {

  margin: 0;

  font-size: 13px !important;

  color: var(--fg-3);

}

.top-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.top-date-pill, .export-btn {

  height: 40px;

  min-height: 40px;

  border-radius: 12px;

}



/* Justificantes */

.documents-layout {

  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);

  gap: 16px;

}

.document-card {

  padding: 14px;

}

.document-actions {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 10px;

}

.document-open-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 38px;

  padding: 0 14px;

  border-radius: 12px;

  background: #eff5ff;

  border: 1px solid #d7e4ff;

  color: #295fc7;

  font-weight: 700;

  text-decoration: none;

}

.document-open-link:hover {

  background: #e7f0ff;

}

.document-preview {

  margin-top: 12px;

  border: 1px solid #e6edf7;

  border-radius: 16px;

  background: #f8fbff;

  overflow: hidden;

}

.document-preview.image {

  max-height: 420px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.document-preview.image img {

  display: block;

  width: 100%;

  max-height: 420px;

  object-fit: contain;

  background: #fff;

}

.document-preview.pdf {

  height: 420px;

}

.document-preview.pdf iframe {

  width: 100%;

  height: 100%;

  border: 0;

  background: #fff;

}



@media (max-width: 1100px) {

  .topbar-main {

    flex-direction: column;

    align-items: stretch;

  }

}

@media (max-width: 980px) {

  .documents-layout {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 760px) {

  .content {

    max-width: none;

  }

  .topbar-main {

    padding: 12px 14px;

    border-radius: 18px;

  }

  .topbar h1 { font-size: 24px !important; }

  .document-preview.image,

  .document-preview.pdf { max-height: 320px; height: 320px; }

}



/* V13.4 — Permiso app en una sola línea y sin responsable en Obras */

.worker-card-perm .worker-perm-row {

  display: flex !important;

  flex-wrap: nowrap !important;

  align-items: center !important;

  gap: 8px !important;

}

.worker-card-perm .worker-perm-row select {

  flex: 1 1 auto !important;

  min-width: 120px !important;

}

.worker-card-perm .worker-perm-row .btn-perms-trabajador {

  flex: 0 0 auto !important;

}

.work-resp-select {

  display: none !important;

}



/* =====================================================================

   V13.11 — Ficha trabajador: acceso a justificantes + iconos sidebar

   ===================================================================== */



/* Iconos más legibles sobre el azul oscuro */

.nav-item[data-section="dashboard"]::before { content: "🪪" !important; filter: saturate(1.35) brightness(1.18); }

.nav-item[data-section="workers"]::before { content: "👷" !important; filter: saturate(1.35) brightness(1.18); }



/* Botón de justificante en Ficha trabajador */

.day-total-doc {

  margin-top: 8px;

  min-height: 32px;

  padding: 0 11px;

  border-radius: 999px;

  border: 1px solid #d7e4ff;

  background: #eff5ff;

  color: #295fc7;

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  white-space: nowrap;

}

.day-total-doc:hover {

  background: #e7f0ff;

  transform: translateY(-1px);

}

.btn-open-doc-mini {

  min-width: 32px;

  width: 32px;

  height: 32px;

  min-height: 32px;

  padding: 0;

  border-radius: 10px;

  border: 1px solid #d7e4ff;

  background: #eff5ff;

  color: #295fc7;

  font-weight: 800;

  display: inline-grid;

  place-items: center;

}

.btn-open-doc-mini:hover {

  background: #e7f0ff;

}

.justificante-inline {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  margin-left: 6px;

  padding: 3px 8px;

  border-radius: 999px;

  background: #eef4ff;

  color: #295fc7;

  border: 1px solid #d7e4ff;

  font-size: 11px;

  font-style: normal;

  font-weight: 800;

}



/* =====================================================================

   V13.12 — Trabajadores en formato tabla compacta

   ===================================================================== */



.worker-list-cards {

  display: block;

}

.workers-table-wrap {

  width: 100%;

  overflow: auto;

  border: 1px solid #dfe8f5;

  border-radius: 18px;

  background: #fff;

}

.workers-management-table {

  width: 100%;

  min-width: 1120px;

  border-collapse: separate;

  border-spacing: 0;

  font-size: 14px;

}

.workers-management-table thead th {

  position: sticky;

  top: 0;

  z-index: 2;

  padding: 12px 14px;

  background: #f7faff;

  border-bottom: 1px solid #e2eaf5;

  color: #62718b;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .055em;

  text-transform: uppercase;

  text-align: left;

  white-space: nowrap;

}

.workers-management-table tbody td {

  padding: 10px 14px;

  border-bottom: 1px solid #edf3fa;

  vertical-align: middle;

  background: #fff;

}

.workers-management-table tbody tr:last-child td {

  border-bottom: 0;

}

.workers-management-table tbody tr:hover td {

  background: #fbfdff;

}

.worker-table-id {

  gap: 10px;

}

/* V41: trabajadores de subcontrata separados al final del listado */

.worker-table-separator td {

  padding: 10px 14px !important;

  background: #f1f5fb !important;

  color: #52627d;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .04em;

  text-transform: uppercase;

  border-bottom: 1px solid #e2eaf5 !important;

}

.worker-inactivo-badge {

  background: #e2e8f0 !important;

  color: #475569 !important;

  margin-right: 4px;

}

.today-row.worker-inactivo { opacity: .55; }

.today-row.worker-inactivo:hover { opacity: .8; }

.worker-sub-badge {

  display: inline-block;

  margin: 2px 0;

  padding: 2px 8px;

  border-radius: 999px;

  background: #fef3c7;

  color: #92400e;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .03em;

  text-transform: uppercase;

}

.worker-col-name {

  width: 28%;

  min-width: 260px;

}

.worker-col-obra {

  width: 25%;

  min-width: 260px;

}

.worker-col-last {

  width: 23%;

  min-width: 235px;

  color: #0f1f3a;

}

.worker-col-last strong {

  font-size: 13px;

  line-height: 1.25;

}

.worker-col-perm {

  width: 20%;

  min-width: 245px;

}

.worker-col-actions,

.workers-actions-head {

  width: 88px;

  text-align: center !important;

}

/* V67: los dos botones de acciones (editar datos / borrar) se quedaban sin

   sitio en los 58px de antes y el segundo caia a una segunda linea -- ahora

   van en fila, uno junto al otro, del mismo tamaño. */

/* V112: el <td> debe conservar display: table-cell. El flex directo
   sobre la celda desalineaba toda la fila y hacía sobresalir los iconos. */
.workers-management-table .worker-col-actions-inner {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  width: 100%;

}

.workers-management-table .btn-edit-datos {

  width: 36px;

  min-width: 36px;

  height: 36px;

  min-height: 36px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

}

.workers-management-table .worker-avatar {

  width: 38px;

  height: 38px;

  border-radius: 13px;

  font-size: 13px;

}

.workers-management-table .worker-card-name strong {

  font-size: 14px;

}

.workers-management-table .worker-card-name span {

  font-size: 12px;

}

.workers-management-table .worker-obra-select,

.workers-management-table .worker-role-select {

  width: 100%;

  min-height: 38px;

  border-radius: 11px;

  background: #fff;

}

.workers-management-table .worker-perm-row {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 8px;

  align-items: center;

}

.workers-management-table .btn-perms-trabajador {

  min-height: 38px;

  border-radius: 11px;

  white-space: nowrap;

}

.workers-management-table .btn-delete-worker {

  width: 36px;

  min-width: 36px;

  height: 36px;

  min-height: 36px;

  border-radius: 12px;

}

.workers-management-table .btn-auto-obra {

  margin-top: 6px;

  display: inline-flex;

  min-height: 30px;

  font-size: 12px;

}



@media (max-width: 920px) {

  .workers-table-wrap {

    border: 0;

    background: transparent;

    overflow: visible;

  }

  .workers-management-table,

  .workers-management-table thead,

  .workers-management-table tbody,

  .workers-management-table tr,

  .workers-management-table th,

  .workers-management-table td {

    display: block;

    width: 100%;

    min-width: 0;

  }

  .workers-management-table thead {

    display: none;

  }

  .workers-management-table tbody tr {

    display: grid;

    gap: 10px;

    margin-bottom: 12px;

    padding: 14px;

    border: 1px solid #dfe8f5;

    border-radius: 18px;

    background: #fff;

  }

  .workers-management-table tbody td {

    padding: 0;

    border: 0;

    background: transparent !important;

  }

  .worker-col-obra::before,

  .worker-col-last::before,

  .worker-col-perm::before {

    content: attr(data-label);

    display: block;

    margin-bottom: 6px;

    color: #6b7c93;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;

  }

  .worker-col-actions {

    text-align: left !important;

  }

}



/* =====================================================================

   V13.26 — Hoy web estilo panel operativo premium

   ===================================================================== */



.today-legacy-hidden { display: none !important; }



body {

  background: #f3f6fb;

}



.content {

  padding: 18px 28px 28px;

}



.topbar {

  border: 0 !important;

  box-shadow: none !important;

  background: transparent !important;

  padding: 0 0 14px !important;

  margin: 0 0 14px !important;

  border-bottom: 1px solid #dfe7f1 !important;

}

.topbar-main,

.topbar {

  max-width: none !important;

}

.topbar h1 {

  font-size: 34px !important;

  letter-spacing: -0.04em;

}

.topbar p {

  color: #6c7b91;

}

.top-actions {

  gap: 10px;

}

.top-date-pill {

  min-height: 50px;

  border-radius: 12px;

  background: #fff;

  border: 1px solid #dbe4ef;

  box-shadow: 0 8px 18px rgba(20, 36, 62, 0.04);

  font-weight: 800;

}

.export-btn {

  min-height: 46px;

  border-radius: 10px;

}



.today-pro-section {

  display: grid;

  gap: 18px;

}

.today-pro-grid {

  display: grid;

  grid-template-columns: 1.1fr 1fr 1fr 1fr;

  gap: 14px;

}

.today-kpi {

  min-height: 132px;

  padding: 18px;

  border-radius: 18px;

  border: 1px solid #dbe4ef;

  background: #fff;

  box-shadow: 0 10px 22px rgba(20, 36, 62, 0.05);

  display: grid;

  align-content: space-between;

  cursor: pointer;

}

.today-kpi:hover {

  transform: translateY(-1px);

  box-shadow: 0 14px 28px rgba(20, 36, 62, 0.075);

}

.today-kpi-dark {

  color: #fff;

  background: linear-gradient(135deg, #152142 0%, #1f335f 55%, #253f73 100%);

  border: 0;

}

.kpi-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}

.kpi-head span {

  color: #7f8da3;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-weight: 900;

}

.today-kpi-dark .kpi-head span,

.today-kpi-dark small {

  color: rgba(255,255,255,.72);

}

.kpi-head strong,

.kpi-head b {

  padding: 4px 8px;

  border-radius: 999px;

  background: #edf4ff;

  color: #315bd9;

  font-size: 12px;

  font-weight: 900;

}

.today-kpi strong[id] {

  font-size: 34px;

  line-height: 1;

  letter-spacing: -0.04em;

  color: #18243a;

}

.today-kpi-dark strong[id] {

  color: #fff;

}

.today-kpi small {

  color: #6c7b91;

  font-weight: 700;

}

.sparkline {

  height: 28px;

  position: relative;

  overflow: hidden;

  border-radius: 6px;

  background: linear-gradient(180deg, transparent 30%, rgba(255,255,255,.08));

}

.sparkline i {

  position: absolute;

  left: 0;

  right: 0;

  top: 12px;

  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg, rgba(124,192,255,.3), rgba(124,192,255,1), rgba(124,192,255,.45));

  transform: skewY(-5deg);

}

.sparkline.blue i { background: linear-gradient(90deg, rgba(88,164,245,.35), #5ba7f4, rgba(88,164,245,.45)); }

.sparkline.amber i { background: linear-gradient(90deg, rgba(203,142,50,.35), #d29a3e, rgba(203,142,50,.45)); }

.sparkline.red i { background: linear-gradient(90deg, rgba(226,91,91,.35), #e25b5b, rgba(226,91,91,.45)); }



.today-status-panel {

  padding: 18px 20px;

  border-radius: 18px;

}

.status-head {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;

}

.status-head strong {

  color: #18243a;

  font-size: 15px;

}

.status-head span {

  color: #758399;

  font-size: 12px;

  font-weight: 700;

}

.today-status-bar {

  display: flex;

  width: 100%;

  height: 14px;

  overflow: hidden;

  border-radius: 999px;

  background: #edf2f8;

}

.status-segment {

  min-width: 0;

  height: 100%;

  border-radius: 0;

}

.status-segment.working { background: #4eaa82; }

.status-segment.closed { background: #3456d8; }

.status-segment.missing { background: #b24d47; }

.status-segment.ausente { background: #d89b1d; }

.status-segment.vacation { background: #56a7d8; }

.status-segment.docs { background: #7b79e5; }

.today-status-legend {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

  margin-top: 14px;

}

.today-group {

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 0;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  cursor: pointer;

}

.today-group-head {

  display: flex;

  gap: 6px;

  align-items: center;

}

.today-group-head strong,

.today-group-head b {

  font-size: 12px;

  color: #55657c;

}

.today-group::before {

  content: '';

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #dbe4ef;

}

.today-group.working::before { background: #4eaa82; }

.today-group.closed::before { background: #3456d8; }

.today-group.missing::before { background: #b24d47; }

.today-group.vacation::before { background: #56a7d8; }

.today-group.docs::before { background: #7b79e5; }

.avatar-line { display: none; }



.today-main-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 360px;

  gap: 16px;

  align-items: start;

}

.today-table-panel,

.activity-panel {

  border-radius: 18px;

  padding: 0;

  overflow: hidden;

}

.today-table-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 18px 20px;

  border-bottom: 1px solid #dde6f1;

}

.today-table-head h2,

.activity-panel h2 {

  margin: 0;

  color: #18243a;

  font-size: 18px;

  letter-spacing: -0.02em;

}

.today-table-head p {

  margin: 4px 0 0;

  color: #758399;

  font-size: 13px;

}

.count-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 24px;

  min-height: 22px;

  padding: 2px 8px;

  border-radius: 999px;

  background: #edf4ff;

  color: #315bd9;

  font-size: 12px;

  vertical-align: middle;

}

.today-table-tools {

  display: flex;

  align-items: center;

  gap: 10px;

}

.today-table-tools input {

  width: 260px;

  min-height: 38px;

  border-radius: 10px;

  border: 1px solid #dbe4ef;

  padding: 0 14px;

  background: #fbfdff;

}

.today-chipbar {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 4px;

  border-radius: 12px;

  background: #f2f6fb;

}

.today-chip {

  min-height: 32px;

  padding: 0 12px;

  border-radius: 9px;

  color: #5d6c82;

  background: transparent;

  font-weight: 800;

  font-size: 12px;

}

.today-chip.active,

.today-chip:hover {

  background: #fff;

  color: #18243a;

  box-shadow: 0 4px 12px rgba(20, 36, 62, 0.06);

}



.today-workers-table-wrap {

  min-height: 420px;

}

.today-table-scroll {

  width: 100%;

  max-width: 100%;

  overflow-x: auto;

}

.today-table {

  width: 100%;

  min-width: 980px;

  border-collapse: collapse;

}

.today-table th,

.today-table td {

  padding: 13px 18px;

  border-bottom: 1px solid #e6edf5;

  white-space: nowrap;

  text-align: left;

}

.today-table th {

  color: #8996a9;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.09em;

  background: #f8fbff;

}

.today-table tbody tr {

  cursor: pointer;

}

.today-table tbody tr:hover td {

  background: #fbfdff;

}

.person-cell {

  display: flex;

  align-items: center;

  gap: 12px;

}

.avatar-mini {

  width: 34px;

  height: 34px;

  display: inline-grid;

  place-items: center;

  border-radius: 50%;

  background: #e9efff;

  color: #315bd9;

  font-weight: 900;

  font-size: 12px;

}

.person-cell strong {

  display: block;

  color: #1b263b;

  font-size: 13px;

}

.person-cell small {

  display: block;

  color: #758399;

  font-size: 11px;

}

/* ── V5: Difusión ─────────────────────────────────────────────────────────── */

.difusion-msg { display: grid; gap: 6px; margin: 12px 0; }

.difusion-msg textarea {

  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit;

  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; resize: vertical;

}

.difusion-archivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }

.difusion-archivo-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.difusion-archivo-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.difusion-archivo-nombre { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--blue-ink,#1e40af); background: var(--blue-soft,#dbeafe); padding: 5px 12px; border-radius: 999px; }

.difusion-archivo-quitar { width: 26px; height: 26px; border-radius: 50%; font-size: 12px; color: var(--fg-3); }

.difusion-archivo-quitar:hover { background: var(--red-soft,#fee2e2); color: var(--red-ink,#991b1b); }

.difusion-motor {

  font-size: 12px; font-weight: 700; color: #1e40af; background: #dbeafe;

  padding: 6px 10px; border-radius: var(--r-pill); white-space: nowrap;

}

.difusion-dest { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.difusion-dest-head {

  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;

  padding: 10px 12px; background: #f8fbff; border-bottom: 1px solid var(--line);

}

.difusion-todos { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.difusion-dest-head input[type="search"] {

  flex: 1; min-width: 160px; padding: 7px 10px; font-size: 13px;

  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;

}

/* V6: icono junto al titulo de cada difusion. Evolution -> WhatsApp; Meta -> INOUT. */

.difusion-title { display: inline-flex; align-items: center; gap: 8px; }

.difusion-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.difusion-ico-wa svg { display: block; }

.difusion-ico-inout {

  width: 24px; height: 24px; border-radius: 7px;

  background: linear-gradient(135deg, #ffffff 0%, #9ee7ff 45%, #65d9ff 100%);

  color: #0f172a; font-size: 11px; font-weight: 900; letter-spacing: .3px;

}

.difusion-filtro {

  padding: 7px 10px; font-size: 13px; background: #fff;

  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;

}

.difusion-fecha {

  padding: 7px 10px; font-size: 13px; background: #fff;

  border: 1px solid var(--line); border-radius: var(--r-sm);

}

.difusion-count { font-size: 12px; font-weight: 700; color: var(--fg-3); white-space: nowrap; }

.difusion-list { max-height: 320px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; background: #fff; }

.difusion-list.is-disabled { opacity: .5; pointer-events: none; }

.difusion-item {

  display: flex; align-items: center; gap: 10px; padding: 7px 10px;

  border-radius: var(--r-sm); cursor: pointer;

}

.difusion-item:hover { background: #f1f5f9; }

.difusion-item span { display: grid; min-width: 0; }

.difusion-item strong { font-size: 13px; }

.difusion-item small { color: var(--fg-3); font-size: 12px; }

.difusion-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

.difusion-resultado { font-size: 13px; font-weight: 700; color: var(--fg-2); }



/* V67: filtros combinables tipo "Excel" (obra + estado del dia) -- boton con

   icono de embudo, panel flotante con ticks, y chips con X para quitar uno a uno. */

.difusion-filtros-wrap { position: relative; }

.difusion-filtros-btn {

  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;

  font-size: 13px; font-weight: 700; background: #fff; color: var(--fg-2);

  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;

}

.difusion-filtros-btn:hover { background: #f1f5f9; }

.difusion-filtros-btn[aria-expanded="true"] { background: var(--blue-soft,#dbeafe); border-color: #93c5fd; color: #1e40af; }

.difusion-filtros-panel {

  /* V67 fix: antes era position:absolute con max-height:70vh -- si el botón

     "Filtros" estaba en la mitad inferior de la página, el panel se abría

     hacia abajo y quedaba cortado por el borde de la ventana SIN poder

     hacerse scroll (70vh se mide desde arriba del todo, no desde donde

     empieza el panel), dejando "Estado del día" inalcanzable. Ahora es

     position:fixed y el top/left/max-height se calculan en JS (ver

     el manejador de filtrosBtn) según dónde esté el botón de verdad. */

  position: fixed; z-index: 2000;

  /* V67 (2): pedido explicito -- con 360px, pares de pastilla larga como

     "Está de vacaciones"/"No está de vacaciones" iban muy justos de sitio y

     a veces se partian a una segunda linea segun el navegador/zoom. Con mas

     ancho entran comodas en una sola fila. */

  width: min(430px, 92vw); padding: 14px; display: grid; gap: 14px;

  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);

  box-shadow: 0 16px 40px rgba(15,23,42,.16); overflow-y: auto;

}

.difusion-filtros-grupo h5 { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em; }

.difusion-filtros-checks { display: grid; gap: 2px; }

/* V68: pedido explicito -- el listado de obras (puede ser largo) ya no se

   suelta entero al abrir "Filtros"; solo se ve este resumen + el tick hasta

   que el usuario decide filtrar por obra. */

.difusion-obra-resumen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.difusion-obra-grupo-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--fg-2); cursor: pointer; }

.difusion-obra-resumen-txt { font-size: 12px; color: var(--fg-3); }

.difusion-obra-resumen .link-button { margin-left: auto; }

.difusion-check-lista { display: grid; gap: 2px; max-height: 160px; overflow-y: auto; padding-right: 2px; }

.difusion-obra-buscar { width: 100%; box-sizing: border-box; padding: 6px 9px; margin-bottom: 6px; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--r-sm); }

.difusion-obra-buscar-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-3); cursor: pointer; margin-bottom: 6px; }

.difusion-check-fila { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 2px; cursor: pointer; }

.difusion-estado-grupo { margin-bottom: 10px; }

.difusion-estado-grupo:last-child { margin-bottom: 0; }

.difusion-estado-grupo > strong { display: block; font-size: 11px; font-weight: 800; color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }

/* V67 (2): pedido explícito -- las opciones de "Estado del día" como pastillas

   en fila en vez de checkboxes apiladas, más visual. */

.difusion-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.difusion-pill {

  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;

  font-size: 12px; font-weight: 600; color: var(--fg-2); background: #f1f5f9;

  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none;

  white-space: nowrap;

}

.difusion-pill input { margin: 0; }

.difusion-pill:hover { background: #e6edf5; }

.difusion-pill.is-active { background: var(--blue-soft,#dbeafe); border-color: #93c5fd; color: #1e40af; }

.difusion-obra-modo { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

.difusion-obra-modo label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }

.difusion-obra-rango { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.difusion-obra-rango input[type="date"] { padding: 5px 7px; font-size: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }

.difusion-obra-rango.hidden { display: none; }

.difusion-filtros-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }

.difusion-filtros-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }

.difusion-filtros-chips:empty { padding: 0; }

.difusion-chip {

  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;

  color: #1e40af; background: var(--blue-soft,#dbeafe); padding: 4px 6px 4px 10px; border-radius: 999px;

}

.difusion-chip button {

  display: inline-flex; align-items: center; justify-content: center;

  width: 16px; height: 16px; min-width: 16px; min-height: 16px; padding: 0; border: 0;

  border-radius: 50%; font-size: 10px; line-height: 1; color: inherit; background: rgba(30,64,175,.12); cursor: pointer;

}

.difusion-chip button:hover { background: rgba(30,64,175,.24); }



.workday-bar {

  position: relative;

  width: 240px;

  height: 8px;

  border-radius: 999px;

  background: #eef3f8;

  overflow: hidden;

}

.workday-bar i {

  /* V5: segmento posicionado sobre la linea de 24h (left = hora de entrada) */

  position: absolute;

  top: 0;

  display: block;

  height: 100%;

  min-width: 2px;

  border-radius: inherit;

  background: #4eaa82;

}

/* V5: marcas de referencia cada 6 h (06/12/18) para leer la franja horaria */

.workday-bar::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(15,23,42,.10) calc(25% - 1px), rgba(15,23,42,.10) 25%);

}

.today-row.open .workday-bar i { background: #c98f39; }

.today-row.vacation .workday-bar i { background: #56a7d8; }

.today-row.missing .workday-bar i { background: #e5eaf1; }

.state-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 900;

}

.state-pill::before {

  content: '';

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: currentColor;

}

.state-pill.closed { color: #218160; background: #e9f8f2; }

.state-pill.open { color: #91631d; background: #fff5df; }

.state-pill.missing { color: #b24d47; background: #fff0ef; }

.state-pill.vacation { color: #336e99; background: #eaf6ff; }

.state-pill.ausente { color: #91631d; background: #fff5df; }

.state-pill.parte { color: #3454a6; background: #eaeeff; }

.empty-cell {

  text-align: center !important;

  color: #758399;

  padding: 36px !important;

}



.activity-panel .panel-head {

  padding: 18px 20px;

  border-bottom: 1px solid #dde6f1;

}

.activity-timeline {

  padding: 14px 18px 18px;

  max-height: 580px;

  overflow: auto;

}

.activity-item {

  display: grid;

  grid-template-columns: 52px 1fr;

  gap: 12px;

  padding: 10px 0;

  border-bottom: 1px solid #edf2f8;

}

.activity-item:last-child { border-bottom: 0; }

.activity-item time {

  color: #65758b;

  font-size: 12px;

  font-weight: 900;

}

.activity-item div {

  position: relative;

  padding-left: 16px;

}

.activity-item div::before {

  content: '';

  position: absolute;

  left: 0;

  top: 6px;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #4eaa82;

}

.activity-item.exit div::before { background: #3456d8; }

.activity-item.doc div::before { background: #7b79e5; }

.activity-item.vacation div::before { background: #56a7d8; }

.activity-item strong {

  display: block;

  color: #243049;

  font-size: 13px;

}

.activity-item span {

  display: block;

  color: #758399;

  font-size: 12px;

  margin-top: 2px;

}



@media (max-width: 1280px) {

  .today-pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .today-main-layout { grid-template-columns: 1fr; }

}

@media (max-width: 860px) {

  .content { padding: 12px; }

  .today-pro-grid { grid-template-columns: 1fr; }

  .today-table-head,

  .today-table-tools { align-items: stretch; flex-direction: column; }

  .today-table-tools input { width: 100%; }

  .today-chipbar { overflow-x: auto; }

}





/* =====================================================================

   V13.27 — El diseño premium solo afecta a Hoy

   ===================================================================== */



/* Fuera de Hoy, se recupera la cabecera compacta normal para que no invada el resto de pantallas. */

body:not([data-active-section="today"]) .content {

  padding: 14px 16px 24px !important;

}

body:not([data-active-section="today"]) .topbar {

  position: sticky !important;

  top: 8px !important;

  z-index: 12 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 14px !important;

  margin: 0 0 14px !important;

  padding: 10px 14px !important;

  border: 1px solid #dfe7f2 !important;

  border-radius: 18px !important;

  background: rgba(255,255,255,0.94) !important;

  box-shadow: 0 10px 24px rgba(18,36,65,0.06) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

}

body:not([data-active-section="today"]) .topbar h1 {

  font-size: 24px !important;

  line-height: 1.1 !important;

  letter-spacing: -0.03em !important;

}

body:not([data-active-section="today"]) .topbar p {

  margin-top: 2px !important;

  font-size: 13px !important;

  color: #6c7b91 !important;

}

body:not([data-active-section="today"]) .top-date-pill,

body:not([data-active-section="today"]) .export-btn {

  min-height: 38px !important;

  height: 38px !important;

  border-radius: 12px !important;

}

body:not([data-active-section="today"]) .export-btn {

  min-width: 88px !important;

  font-size: 13px !important;

}



/* En Hoy se mantiene el diseño premium, pero el resto de secciones no heredan sus ajustes. */

body[data-active-section="today"] .topbar {

  border: 0 !important;

  box-shadow: none !important;

  background: transparent !important;

  padding: 0 0 14px !important;

  margin: 0 0 14px !important;

  border-bottom: 1px solid #dfe7f1 !important;

  border-radius: 0 !important;

}

body[data-active-section="today"] .content {

  padding: 18px 28px 28px !important;

}



@media (max-width: 900px) {

  body:not([data-active-section="today"]) .topbar,

  body[data-active-section="today"] .topbar {

    flex-direction: column !important;

    align-items: stretch !important;

  }

  body[data-active-section="today"] .content,

  body:not([data-active-section="today"]) .content {

    padding: 12px !important;

  }

}





/* =====================================================================

   V13.28 — Premium estrictamente SOLO en Hoy

   ===================================================================== */



/* Fuera de Hoy se fuerza el estilo normal anterior, anulando cualquier resto del dashboard premium. */

body:not([data-active-section="today"]) .content {

  max-width: none !important;

  padding: 14px 16px 24px !important;

}



body:not([data-active-section="today"]) .topbar {

  position: sticky !important;

  top: 8px !important;

  z-index: 20 !important;

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 14px !important;

  width: auto !important;

  max-width: none !important;

  min-height: 64px !important;

  margin: 0 0 14px !important;

  padding: 10px 14px !important;

  border: 1px solid #dfe7f2 !important;

  border-bottom: 1px solid #dfe7f2 !important;

  border-radius: 18px !important;

  background: rgba(255,255,255,0.96) !important;

  box-shadow: 0 10px 24px rgba(18,36,65,0.06) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

}



body:not([data-active-section="today"]) .topbar-copy {

  display: grid !important;

  gap: 2px !important;

  min-width: 0 !important;

}



body:not([data-active-section="today"]) .topbar h1 {

  margin: 0 !important;

  color: #132034 !important;

  font-size: 24px !important;

  line-height: 1.1 !important;

  letter-spacing: -0.03em !important;

}



body:not([data-active-section="today"]) .topbar p {

  margin: 2px 0 0 !important;

  color: #6c7b91 !important;

  font-size: 13px !important;

  line-height: 1.25 !important;

}



body:not([data-active-section="today"]) .top-actions {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 8px !important;

  flex-wrap: nowrap !important;

}



body:not([data-active-section="today"]) .top-date-pill,

body:not([data-active-section="today"]) .export-btn {

  height: 38px !important;

  min-height: 38px !important;

  border-radius: 12px !important;

  box-shadow: none !important;

}



body:not([data-active-section="today"]) .top-date-pill {

  background: #f8fbff !important;

  border: 1px solid #dbe5f1 !important;

  color: #334155 !important;

  padding: 0 12px !important;

  font-size: 13px !important;

}



body:not([data-active-section="today"]) .export-btn {

  min-width: 88px !important;

  padding: 0 13px !important;

  font-size: 13px !important;

}



/* Las pantallas que NO son Hoy recuperan paneles normales. */

body:not([data-active-section="today"]) .section:not(#todaySection) {

  max-width: var(--panel-max, 1540px) !important;

  margin: 0 !important;

}



body:not([data-active-section="today"]) .panel,

body:not([data-active-section="today"]) .form-panel,

body:not([data-active-section="today"]) .list-panel,

body:not([data-active-section="today"]) .metric,

body:not([data-active-section="today"]) .controls {

  border-radius: 18px !important;

  box-shadow: 0 10px 26px rgba(18,36,65,0.05) !important;

}



/* En Hoy sí se mantiene el estilo premium. */

body[data-active-section="today"] .content {

  padding: 18px 28px 28px !important;

}

body[data-active-section="today"] .topbar {

  position: static !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 16px !important;

  width: 100% !important;

  min-height: auto !important;

  margin: 0 0 14px !important;

  padding: 0 0 14px !important;

  border: 0 !important;

  border-bottom: 1px solid #dfe7f1 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}

body[data-active-section="today"] .topbar h1 {

  font-size: 34px !important;

}



@media (max-width: 900px) {

  body:not([data-active-section="today"]) .topbar,

  body[data-active-section="today"] .topbar {

    flex-direction: column !important;

    align-items: stretch !important;

  }

  body:not([data-active-section="today"]) .top-actions,

  body[data-active-section="today"] .top-actions {

    justify-content: flex-start !important;

    flex-wrap: wrap !important;

  }

  body[data-active-section="today"] .content,

  body:not([data-active-section="today"]) .content {

    padding: 12px !important;

  }

}



/* V68 (4): a <=768px el boton de menu (.mobile-menu-toggle) es "fixed" en

   la esquina superior izquierda (top:10,left:10, 42x42 -- ver @media

   max-width:768px mas arriba). La regla de justo encima ("padding:12px

   !important" a <=900px, pensada para el rango 769-900px donde NO hay

   boton fijo) tambien se aplicaba en el rango <=768px por tener la MISMA

   especificidad y venir despues -- sin hueco arriba, el boton tapaba las

   primeras letras del titulo de cada pantalla (visto en Vacaciones,

   Resumen mensual...). Se restaura el hueco superior solo donde el boton

   realmente esta fijo. */

@media (max-width: 768px) {

  body[data-active-section="today"] .content,

  body:not([data-active-section="today"]) .content {

    padding: 64px 12px 16px !important;

  }

}



/* =====================================================================

   V13.29 — Corrección real: Hoy premium SOLO cuando la sección Hoy está activa

   ===================================================================== */



/* La regla .today-pro-section estaba reactivando el bloque Hoy aunque otra página estuviese abierta. */

#todaySection.section:not(.active),

body:not([data-active-section="today"]) #todaySection {

  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



/* Solo si Hoy está activo se permite el grid premium. */

body[data-active-section="today"] #todaySection.section.active.today-pro-section {

  display: grid !important;

  visibility: visible !important;

  pointer-events: auto !important;

  gap: 18px !important;

}



/* El resto de páginas mantienen su bloque normal y nunca heredan el dashboard de Hoy. */

body:not([data-active-section="today"]) .section.active:not(#todaySection) {

  display: block !important;

  visibility: visible !important;

}



body:not([data-active-section="today"]) .today-pro-grid,

body:not([data-active-section="today"]) .today-status-panel,

body:not([data-active-section="today"]) .today-main-layout,

body:not([data-active-section="today"]) .activity-panel,

body:not([data-active-section="today"]) .today-table-panel {

  display: none !important;

}





/* V13.30 — Eliminar partes desde resumen */

.danger-button {

  border: 1px solid #fecaca;

  background: #fff1f1;

  color: #b42323;

  border-radius: 10px;

  padding: 8px 12px;

  font-weight: 800;

  cursor: pointer;

}

.danger-button:hover { background: #fee2e2; }

.partes-edit-list {

  display: grid;

  gap: 8px;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid var(--line, #e2e8f0);

}

.parte-edit-row {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto auto;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border: 1px solid var(--line, #e2e8f0);

  border-radius: 12px;

  background: #fff;

}

.parte-edit-row strong { display:block; color:#0f172a; }

.parte-edit-row span { display:block; color:#64748b; font-size:12px; }

.parte-edit-row-values { display:grid; justify-items:end; gap:2px; font-variant-numeric:tabular-nums; }

.parte-edit-row-values b { color:#0f172a; }

.parte-edit-row-values .is-ok { color:#15803d; }

.parte-edit-row-values .is-warn { color:#b45309; }

.parte-edit-row-values .is-bad { color:#b42323; }

@media (max-width: 700px) {

  .parte-edit-row { grid-template-columns: 1fr; align-items: stretch; }

  .parte-edit-row-values { justify-items:start; }

}



/* V13.31 — Parte diario inline junto al fichaje */

.fichaje-actions .btn-parte-inline {

  min-height: 32px;

  padding: 0 12px;

  border-radius: 999px;

  border: 1px solid #d8e4f5;

  background: #f8fbff;

  color: #132238;

  font-weight: 800;

  font-size: 12px;

  box-shadow: 0 6px 14px rgba(18, 36, 65, .05);

  white-space: nowrap;

}

.fichaje-actions .btn-parte-inline:hover {

  background: #edf4ff;

  border-color: #bdd1f3;

}

.day-total .day-total-parte { display: none !important; }

@media (max-width: 900px) {

  .fichaje-actions .btn-parte-inline { padding: 0 10px; font-size: 11px; }

}





/* =====================================================================

   V13.40 — Web: botón + fichaje integrado en la misma línea

   ===================================================================== */

.fichaje-actions {

  flex-wrap: nowrap !important;

  align-items: center !important;

  max-width: none !important;

}

.create-fichaje-wrap--inline {

  display: inline-flex !important;

  align-items: center !important;

  margin: 0 !important;

  padding: 0 !important;

  flex: 0 0 auto !important;

}

.create-fichaje-wrap--inline .btn-create-fichaje-mini {

  width: 32px !important;

  min-width: 32px !important;

  height: 32px !important;

  min-height: 32px !important;

  border-radius: 10px !important;

  display: inline-grid !important;

  place-items: center !important;

}

.create-fichaje-wrap--inline .create-fichaje-form {

  position: absolute !important;

  right: 0 !important;

  top: calc(100% + 8px) !important;

  z-index: 25 !important;

  width: min(360px, 90vw) !important;

  background: #fff !important;

  border: 1px solid #d8e4f5 !important;

  border-radius: 14px !important;

  box-shadow: 0 18px 40px rgba(18,36,65,.16) !important;

  padding: 12px !important;

}

.fichaje-pill {

  position: relative !important;

}

.day-fichajes-detail > .create-fichaje-wrap:not(.create-fichaje-wrap--inline) {

  justify-self: end !important;

}





/* =====================================================================

   V13.45 — Hoy con selector de día y comparativa histórica

   ===================================================================== */

.today-date-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  margin: 0 0 16px;

  padding: 12px 14px;

  background: rgba(255,255,255,.92);

  border: 1px solid rgba(218,226,238,.95);

  border-radius: 20px;

  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);

}

.today-date-nav {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.today-date-nav button,

.today-date-nav input {

  min-height: 38px;

  border: 1px solid var(--line, #dce5f0);

  border-radius: 12px;

  background: #fff;

  color: var(--fg, #101828);

  font-weight: 700;

  padding: 0 12px;

}

.today-date-nav button {

  min-width: 40px;

  cursor: pointer;

}

.today-date-nav button:hover {

  background: #f4f7fb;

}

.today-date-caption {

  display: grid;

  gap: 2px;

  text-align: right;

  min-width: 190px;

}

.today-date-caption strong {

  font-size: 14px;

  color: var(--fg, #101828);

}

.today-date-caption span {

  font-size: 12px;

  color: var(--fg-3, #64748b);

}

.today-comparison-panel {

  margin: 16px 0;

}

.today-comparison-chart {

  display: grid;

  grid-template-columns: repeat(7, minmax(0,1fr));

  gap: 10px;

  align-items: end;

  min-height: 132px;

  padding-top: 8px;

}

.today-compare-day {

  display: grid;

  gap: 5px;

  justify-items: center;

  min-width: 0;

}

.today-compare-bar {

  width: 100%;

  max-width: 36px;

  height: 78px;

  display: flex;

  align-items: flex-end;

  border-radius: 999px;

  background: #edf2f7;

  overflow: hidden;

}

.today-compare-bar i {

  display: block;

  width: 100%;

  min-height: 6px;

  background: linear-gradient(180deg, #60a5fa, #2563eb);

  border-radius: inherit;

}

.today-compare-day.selected .today-compare-bar i {

  background: linear-gradient(180deg, #34d399, #059669);

}

.today-compare-day strong {

  font-size: 11px;

  color: var(--fg, #101828);

  white-space: nowrap;

}

.today-compare-day span {

  font-size: 11px;

  color: var(--fg-3, #64748b);

  white-space: nowrap;

}

@media (max-width: 720px) {

  .today-date-toolbar {

    align-items: stretch;

    flex-direction: column;

  }

  .today-date-caption {

    text-align: left;

    min-width: 0;

  }

  .today-date-nav input {

    flex: 1 1 150px;

  }

  .today-comparison-chart {

    gap: 6px;

  }

  .today-compare-day strong {

    display: none;

  }

}





/* =====================================================================

   V13.47 — Ajustes solicitados: Hoy sin bloque comparativo, mini gráficas por hora,

   + de fichaje a la derecha y eliminar fichaje desde edición.

   ===================================================================== */

.today-comparison-panel { display: none !important; }

.sparkline.sparkline-bars {

  height: 28px;

  display: flex !important;

  align-items: flex-end;

  gap: 3px;

  padding: 0 2px;

  background: transparent !important;

  overflow: hidden;

}

.sparkline.sparkline-bars::before,

.sparkline.sparkline-bars i { display: none !important; }

.sparkline.sparkline-bars span {

  flex: 1 1 0;

  min-width: 3px;

  border-radius: 6px 6px 2px 2px;

  background: linear-gradient(180deg, rgba(91,167,244,.95), rgba(91,167,244,.24));

}

.today-kpi-dark .sparkline.sparkline-bars span { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(99,151,231,.35)); }

.sparkline.blue.sparkline-bars span { background: linear-gradient(180deg, rgba(88,164,245,.95), rgba(88,164,245,.22)); }

.sparkline.amber.sparkline-bars span { background: linear-gradient(180deg, rgba(211,154,62,.95), rgba(211,154,62,.24)); }

.sparkline.red.sparkline-bars span { background: linear-gradient(180deg, rgba(226,91,91,.95), rgba(226,91,91,.22)); }



.fichaje-pill.fichaje-pill-empty {

  display: grid !important;

  grid-template-columns: minmax(0,1fr) auto !important;

  align-items: center !important;

  gap: 10px !important;

}

.fichaje-pill-empty .fichaje-actions {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  justify-content: flex-end !important;

  white-space: nowrap !important;

}

.create-fichaje-wrap--inline,

.fichaje-actions .create-fichaje-wrap {

  display: inline-flex !important;

  align-items: center !important;

  margin: 0 !important;

}

.fichaje-actions .create-fichaje-form {

  position: absolute;

  right: 0;

  top: calc(100% + 8px);

  z-index: 20;

  min-width: 280px;

  max-width: min(420px, calc(100vw - 48px));

  background: #fff;

  border: 1px solid #dbe5f2;

  border-radius: 14px;

  padding: 12px;

  box-shadow: 0 14px 30px rgba(17,35,63,.16);

}

.fichaje-actions { position: relative; }



.edit-fichaje-actions-row {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  align-items: center;

}

.edit-fichaje-actions-row button {

  flex: 1 1 120px;

}

.btn-edit-delete {

  background: #fff1f1 !important;

  color: #b91c1c !important;

  border: 1px solid #fecaca !important;

  border-radius: 10px;

  font-weight: 700;

  min-height: 38px;

}



@media (max-width: 760px) {

  .fichaje-actions .create-fichaje-form {

    position: static;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    margin-top: 8px;

  }

  .fichaje-pill.fichaje-pill-empty {

    grid-template-columns: minmax(0,1fr) auto !important;

  }

}





/* =====================================================================

   V13.49 — Ficha trabajador más ancha y barra equilibrada

   - La ficha aprovecha más pantalla antes de acortar la barra.

   - Barra horaria mantiene buen ancho.

   - Bloque de fichajes gana espacio y se compacta para no amontonarse.

   ===================================================================== */



@media (min-width: 981px) {

  .content {

    width: min(1640px, calc(100vw - 224px)) !important;

    padding-left: 18px !important;

    padding-right: 18px !important;

  }



  body[data-section="worker"] .panel,

  body[data-view="worker"] .panel,

  #workerView .panel,

  .worker-view .panel,

  .days {

    max-width: 100% !important;

  }



  .day-row {

    grid-template-columns: 158px minmax(430px, 1.35fr) minmax(330px, .82fr) 96px !important;

    gap: 12px !important;

    padding: 14px 16px !important;

  }



  .timeline-wrap {

    min-width: 420px !important;

  }



  .day-fichajes-detail {

    gap: 6px !important;

    min-width: 0 !important;

  }



  .fichaje-pill {

    grid-template-columns: minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 7px 9px !important;

    min-height: 44px !important;

  }



  .fichaje-pill > div strong {

    font-size: 12.5px !important;

    margin-bottom: 2px !important;

    line-height: 1.15 !important;

  }



  .fichaje-pill > div span {

    font-size: 11.5px !important;

    line-height: 1.15 !important;

  }



  .fichaje-actions {

    max-width: none !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 5px !important;

  }



  .fichaje-pill .status {

    font-size: 12px !important;

  }



  .btn-edit-fichaje-mini,

  .btn-create-fichaje-mini {

    width: 25px !important;

    height: 25px !important;

    min-width: 25px !important;

  }



  .btn-parte-inline {

    min-height: 28px !important;

    padding: 0 10px !important;

    font-size: 11.5px !important;

    white-space: nowrap !important;

  }



  .day-total {

    min-width: 86px !important;

  }

  .day-total strong {

    font-size: 17px !important;

  }

  .day-total span {

    font-size: 11px !important;

    line-height: 1.2 !important;

  }

}



@media (min-width: 981px) and (max-width: 1260px) {

  .day-row {

    grid-template-columns: 145px minmax(360px, 1.18fr) minmax(285px, .9fr) 86px !important;

    gap: 10px !important;

  }

  .timeline-wrap { min-width: 350px !important; }

  .fichaje-pill { padding: 6px 8px !important; }

  .btn-parte-inline { padding: 0 8px !important; }

}



/* Fallback: en pantallas más pequeñas se mantiene responsive y no fuerza scroll horizontal */

@media (max-width: 980px) {

  .day-row {

    grid-template-columns: 1fr !important;

  }

  .timeline-wrap {

    min-width: 0 !important;

  }

}





/* =====================================================================

   V13.50 — Ficha trabajador: fichajes más estrechos + parte bajo total

   ===================================================================== */

@media (min-width: 981px) {

  .day-row {

    /* Mantiene barra horaria ancha y reduce la zona de fichajes */

    grid-template-columns: 158px minmax(520px, 1.75fr) minmax(250px, .58fr) 104px !important;

    gap: 10px !important;

  }

  .timeline-wrap {

    min-width: 500px !important;

  }

  .day-fichajes-detail {

    max-width: 330px !important;

    justify-self: end !important;

    width: 100% !important;

  }

  .fichaje-pill {

    min-height: 40px !important;

    padding: 6px 8px !important;

    border-radius: 11px !important;

  }

  .fichaje-pill > div strong {

    font-size: 12px !important;

    max-width: 180px !important;

  }

  .fichaje-pill > div span {

    font-size: 11px !important;

    max-width: 180px !important;

  }

  .fichaje-actions {

    gap: 4px !important;

  }

  .fichaje-pill .status {

    font-size: 11.5px !important;

  }

  .day-total {

    align-content: center !important;

    gap: 4px !important;

    min-width: 96px !important;

  }

}



.day-total-actions {

  display: inline-grid;

  justify-items: end;

  gap: 5px;

  margin-top: 3px;

}

.day-total-parte-btn {

  min-height: 28px;

  padding: 0 11px;

  border-radius: 999px;

  border: 1px solid #d8e4f5;

  background: #f8fbff;

  color: #132238;

  font-weight: 800;

  font-size: 11.5px;

  box-shadow: 0 6px 14px rgba(18, 36, 65, .05);

  white-space: nowrap;

  cursor: pointer;

}

.day-total-parte-btn:hover {

  background: #edf4ff;

  border-color: #bdd1f3;

}

.day-total-parte-btn[data-parte-breakdown] { max-width: 100%; min-width: 88px; overflow: hidden; text-overflow: ellipsis; }

.day-total-parte-btn.is-open { background: #e7f0ff; border-color: #9cb9e9; box-shadow: 0 0 0 2px rgba(66, 108, 190, .12); }



.day-total .day-total-doc {

  margin-top: 0 !important;

  max-width: 100px;

  overflow: hidden;

  text-overflow: ellipsis;

}

/* Se deja inutilizado el parte dentro del fichaje para evitar altura extra */

.fichaje-actions .btn-parte-inline { display: none !important; }



@media (min-width: 981px) and (max-width: 1280px) {

  .day-row {

    grid-template-columns: 145px minmax(420px, 1.55fr) minmax(230px, .65fr) 96px !important;

  }

  .timeline-wrap { min-width: 420px !important; }

  .day-fichajes-detail { max-width: 300px !important; }

}





/* V13.51 — Resumen partes solo tabla */

.partes-edit-list { display: none !important; }





/* V13.52 — Parte en ficha: ayuda visual para edición/borrado */

.day-total-parte-btn { font-weight: 800; }





/* V13.63 — Coordenadas compactas en ficha trabajador.

   Si hay entrada + salida, se apilan en vertical y no empujan la fila. */

.fichaje-actions .location-links.location-links--stacked {

  display: inline-flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

  justify-content: center !important;

  gap: 2px !important;

  max-width: 48px !important;

  flex: 0 0 auto !important;

}

.fichaje-actions .location-links.location-links--stacked a {

  min-height: 16px !important;

  padding: 1px 4px !important;

  font-size: 8.5px !important;

  line-height: 1 !important;

  border-radius: 5px !important;

  justify-content: center !important;

}

/* V140: la ubicación se representa con un icono compacto para no tapar las horas. */
.fichaje-actions .location-links a.location-link,
.fichaje-actions .location-links.location-links--stacked a.location-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  border-radius: 7px !important;
}
.location-link-icon { display: block; transform: translateY(-1px); }

.fichaje-actions .location-links:not(.location-links--stacked) a {

  min-height: 18px;

  padding: 2px 5px;

}



/* =====================================================================

   V13.68 — Correcciones de visualización en móvil (panel web)

   Problemas corregidos:

   1) Vacaciones: el input de importar archivo forzaba un ancho mínimo

      de ~410px y desbordaba toda la sección hacia la derecha.

   2) Usuarios: las tablas de permisos (app/web) no tenían contenedor

      con scroll horizontal y ensanchaban la página hasta ~1100px.

   3) Hoy: el contenedor de la tabla sobresalía unos píxeles del borde.

   ===================================================================== */



/* Contenedor con scroll para las tablas de permisos (Usuarios) */

.perms-table-scroll {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  max-width: 100%;

}

.perms-table-scroll .mobile-perms-table { min-width: 640px; }



@media (max-width: 768px) {

  /* Vacaciones: una sola columna real, sin mínimos intrínsecos */

  #vacationsSection .form-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .form-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .form-panel, .list-panel, .details > article { min-width: 0; max-width: 100%; }

  .form-panel input, .form-panel select, .form-panel textarea, .form-panel button {

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

  }

  .import-control { min-width: 0; max-width: 100%; overflow: hidden; }

  .import-control input[type=file] { width: 100%; max-width: 100%; min-width: 0; }



  /* Contenedores de tablas: nunca más anchos que la pantalla */

  .today-table-scroll, .monthly-scroll, .perms-table-scroll { max-width: 100%; }

  .today-workers, .today-workers-table-wrap { min-width: 0; max-width: 100%; }



  /* Cualquier panel/tarjeta se ajusta al ancho disponible */

  .panel, .details, .summary-grid { min-width: 0; max-width: 100%; }

}



/* ---------------------------------------------------------------------

   V13.68 (bis) — FIX PRINCIPAL móvil: los bloques de rediseño V6/V7

   volvían a declarar "@media (max-width:1180px) .app { 260px ... }"

   DESPUÉS de la regla móvil de 760px, y en el móvil ganaba la última:

   la página reservaba una columna de 260px para el sidebar (que va

   fijo/oculto) y el contenido quedaba aplastado en ~115px.

   V68: el umbral estaba en 760px pero el sidebar pasa a fijo/oculto en

   768px (ver ".sidebar" en @media max-width:768px más arriba) -- entre

   761 y 768px (un iPad en vertical mide EXACTAMENTE 768px) el sidebar ya

   estaba oculto pero la rejilla seguia reservandole 260px de columna

   vacia, dejando el contenido real a la mitad del ancho disponible.

   Subido a 768px para que coincida siempre con el breakpoint real del

   sidebar. OJO: esto NO basta por si solo -- ver el aviso "V68 (2)" junto

   a la regla "V36.7 AUDITORIA VISUAL RESPONSIVE" mas abajo, que reservaba

   la misma columna con un selector por ID y volvia a ganar.

   --------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* minmax(0,1fr) y no "1fr": con "1fr" el minimo es el contenido

     y las tablas anchas volvian a ensanchar toda la pagina. */

  .app { grid-template-columns: minmax(0, 1fr) !important; }

  .content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

  .content section.section { max-width: 100%; min-width: 0; }

}



/* ---------------------------------------------------------------------

   V13.68 (ter) — Restos de desbordamiento tras recuperar el ancho real:

   - Pestañas de Vacaciones (.vac-tabs) sin salto de línea.

   - Fila del formulario de Obras (.works-form-row) sin salto de línea.

   - .form-panel usa columna implícita "auto" y crecía con la tabla

     de permisos: se fuerza columna minmax(0,1fr).

   --------------------------------------------------------------------- */

@media (max-width: 768px) {

  .form-panel { grid-template-columns: minmax(0, 1fr) !important; }

  .form-panel > * { min-width: 0; }



  .vac-tabs { flex-wrap: wrap; }

  .vac-tab-btn { flex: 1 1 auto; min-width: 0; }



  .works-form-row { flex-wrap: wrap; }

  .works-form-row label { min-width: 0 !important; flex: 1 1 140px; }



  .perms-table-scroll { width: 100%; min-width: 0; }

}





/* ── V7: hoja "Partes firmados" (comparativa enviado vs firmado) ─────────── */

.pf-lista { padding: 12px 16px 16px; display: grid; gap: 8px; }

.pf-item {

  display: flex; align-items: center; gap: 10px; padding: 10px 12px;

  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;

  cursor: pointer; text-align: left; width: 100%; font-family: inherit;

}

.pf-item:hover { box-shadow: var(--shadow-2); }

.pf-item .pf-info { flex: 1; min-width: 0; }

.pf-item .pf-info strong { display: block; font-size: 14px; }

.pf-item .pf-info small { display: block; color: var(--fg-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pf-item.pf-verde { border-left: 4px solid #16a34a; }

.pf-item.pf-rojo { border-left: 4px solid #dc2626; background: #fff7f7; }

.pf-item.pf-gris { border-left: 4px solid #cbd5e1; opacity: .85; }

.pf-chip { flex: none; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }

.pf-chip.verde { background: #dcfce7; color: #166534; }

.pf-chip.rojo { background: #fee2e2; color: #991b1b; }

.pf-chip.gris { background: #f1f5f9; color: #64748b; }

.pf-pdf { flex: none; border: 1px solid var(--line); background: #fff; border-radius: var(--r-xs); padding: 5px 9px; font-size: 12px; font-weight: 800; color: #1d4ed8; cursor: pointer; }

/* Bocadillo al pasar por encima (solo escritorio; en movil se abre la ventana) */

.pf-pop {

  position: fixed; z-index: 45; width: 290px; background: #fff;

  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px;

  box-shadow: var(--shadow-3, 0 12px 28px rgba(15,23,42,.16)); pointer-events: none;

}

.pf-pop strong { display: block; font-size: 12.5px; margin-bottom: 6px; }

.pf-pop .pf-dif { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; color: #991b1b; }

.pf-pop .pf-dif b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pf-pop .pf-mas { font-size: 11px; color: var(--fg-3); margin-top: 4px; }

/* Ventana con el parte firmado completo */

.pf-modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 14px; }

.pf-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto; padding: 16px; }

.pf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

.pf-modal-head h3 { margin: 0; font-size: 16px; }

.pf-modal-head small { color: var(--fg-3); font-size: 12px; display: block; margin-top: 3px; }

.pf-modal-close { border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--fg-3); padding: 2px 6px; }

.pf-tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }

.pf-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.pf-tabla th { background: var(--surface-soft); color: var(--fg-3); font-size: 11px; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }

.pf-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--line); }

.pf-tabla tr.dif td { background: #fee2e2; color: #991b1b; font-weight: 700; }

.pf-tabla .tach { text-decoration: line-through; opacity: .75; }

.pf-badge-add { display: inline-block; font-size: 10px; font-weight: 800; background: #fee2e2; color: #991b1b; border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

.pf-modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }



/* V9.8: parte semanal como matriz trabajador x día, igual que Resumen partes */

.pf-modal.pf-modal-weekly { max-width: 1120px; }

.pf-tabla-semanal { min-width: 760px; table-layout: fixed; }

.pf-tabla-semanal th, .pf-tabla-semanal td { text-align: center; vertical-align: middle; }

.pf-tabla-semanal .pf-worker-col { position: sticky; left: 0; z-index: 2; width: 190px; min-width: 190px; text-align: left; background: #fff; border-right: 1px solid var(--line); }

.pf-tabla-semanal thead .pf-worker-col { z-index: 3; background: var(--surface-soft); }

.pf-weekly-day { width: 72px; }

.pf-weekly-day span, .pf-weekly-day small { display: block; }

.pf-weekly-day small { margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--fg-3); }

.pf-weekly-cell { min-width: 66px; font-variant-numeric: tabular-nums; }

.pf-weekly-cell strong { display: block; }

.pf-weekly-cell .tach { display: block; font-size: 10px; }

.pf-tabla-semanal td.dif { background: #fee2e2; color: #991b1b; }

.pf-weekly-total { background: #f8fafc; font-variant-numeric: tabular-nums; }

.pf-weekly-footer td { background: #eef4ff; font-variant-numeric: tabular-nums; border-top: 2px solid #cbd8ef; }

.pf-weekly-footer .pf-worker-col { background: #eef4ff; }

.pf-weekly-notes { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fbfdff; }

.pf-weekly-notes > strong { display: block; margin-bottom: 6px; font-size: 12px; }

.pf-weekly-notes ul { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; max-height: 120px; overflow-y: auto; }

.pf-weekly-notes li { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: 8px; font-size: 11.5px; }

.pf-weekly-notes li span { color: var(--fg-2); }

@media (max-width: 760px) { .pf-modal.pf-modal-weekly { max-width: 100%; } .pf-tabla-semanal .pf-worker-col { width: 130px; min-width: 130px; } }





/* V7: bloque de Usuarios "Partes a encargados" + hoja Subcontratas */

.pe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.pe-grid label span { display: block; font-size: 12px; color: var(--fg-3); font-weight: 700; margin-bottom: 4px; }
/* V101: pedido explicito -- "alinea los cuadros y que no se pisen". Con 4
   campos en un solo .pe-grid (auto-fit) el ancho de cada columna dependia
   de cuantos cupieran, y un <select> con texto largo (ej. "Compuesta (junta
   otras variables)") quedaba recortado. Filas fijas de 2 columnas dan a
   cada campo la mitad del ancho del contenedor siempre, sin recalculo. */
.pe-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .pe-grid-2 { grid-template-columns: 1fr; } }
.sub-item-borrar { border: 1px solid #fecaca; background: #fff; color: #b91c1c; border-radius: var(--r-xs); padding: 4px 8px; font-size: 11.5px; font-weight: 800; cursor: pointer; }

/* V7: chips de personal de subcontrata */
.sub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sub-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
  font-size: 12.5px; font-weight: 700; background: #fbfdff;
}
.sub-chip input { width: 15px; height: 15px; }
.sub-chip:has(input:checked) { border-color: #93c5fd; background: var(--blue-soft); }
.sub-add-personal { display: flex; gap: 8px; }
.sub-add-personal input { flex: 1; }


/* V9: rejilla de partes firmados, multiempresa y entitlements */
.pf-lista { display: block; padding: 12px 16px 16px; }
.pf-grid td.pfcell { font-weight: 800; cursor: default; transition: filter .15s ease, box-shadow .15s ease; }
.pf-grid td.pfcell[data-pf-id] { cursor: pointer; }
.pf-grid td.pfcell:hover { filter: brightness(.97); box-shadow: inset 0 0 0 2px rgba(15,23,42,.12); }
.pf-grid td.pfcell-gris { background: #f1f5f9; color: #64748b; }
.pf-grid td.pfcell-azul { background: #dbeafe; color: #1e40af; }
.pf-grid td.pfcell-verde { background: #dcfce7; color: #166534; }
.pf-grid td.pfcell-rojo { background: #fee2e2; color: #991b1b; font-weight: 800; }
/* V53: interconexión entre empresas -- mismos colores que pfcell-verde/rojo de arriba,
   para la celda de Resumen partes que confirma o corrige una empresa conectada. */
td.conexion-verde { background: #dcfce7; color: #166534; font-weight: 800; }
td.conexion-rojo { background: #fee2e2; color: #991b1b; font-weight: 800; }
.pf-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 2px 0; font-size: 12px; font-weight: 700; }
.pf-legend-gris { color: #64748b; }.pf-legend-azul { color: #1e40af; }.pf-legend-verde { color: #166534; }.pf-legend-rojo { color: #991b1b; }
.pe-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pe-heading h2 { margin-bottom: 3px; }
.plan-badge { border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.plan-badge.premium { background: #fef3c7; color: #92400e; }.plan-badge.free { background: #e2e8f0; color: #475569; }
.entitlement-notice { margin-top: 10px; border: 1px solid #facc15; background: #fffbeb; color: #854d0e; border-radius: 10px; padding: 9px 11px; font-size: 12px; font-weight: 700; }
.entitlement-locked { opacity: .58; }.entitlement-locked span::after { content: " · Premium"; color: #92400e; }
.pe-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }


/* V9.1 Usuarios: entitlements visibles y generación restringida */
.users-section-lead { margin-bottom: 20px; border: 1px solid #bfdbfe; box-shadow: 0 12px 32px rgba(37,99,235,.08); }
.user-generator-panel { position: relative; overflow: hidden; border: 1px solid #cbd5e1; }
.user-generator-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,#2563eb,#7c3aed); }
.user-generator-kicker { display: inline-flex; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.user-generator-note { margin: -4px 0 14px; color: #64748b; font-size: 13px; line-height: 1.45; }

/* V9.4: Generador de partes integrado dentro del panel */
.nav-item[data-section="parteConfig"]::before { content: "🧾"; }
.parte-config-shell { width:100%; min-height:720px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#f4f7fb; box-shadow:var(--shadow-sm); }
.parte-config-frame { display:block; width:100%; height:calc(100vh - 168px); min-height:720px; border:0; background:transparent; }
@media (max-width:760px){.parte-config-shell{min-height:680px;border-radius:12px}.parte-config-frame{height:calc(100vh - 118px);min-height:680px}}


/* V9.3: opciones comerciales granulares en Usuarios */
.pe-commercial { display:grid; grid-template-columns:minmax(180px,.35fr) minmax(420px,1.65fr); gap:18px; margin-top:14px; align-items:start; }
.pe-plan span,.pe-group-title { display:block; color:var(--fg-3); font-size:12px; font-weight:800; margin-bottom:6px; }
.pe-entitlements { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:7px; }
.pe-entitlements label { display:flex; gap:8px; align-items:center; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; font-size:12.5px; font-weight:750; }
.pe-entitlements input { width:17px; height:17px; accent-color:#2563eb; }
.pe-entitlements label:has(input:checked) { border-color:#93c5fd; background:#eff6ff; color:#1e40af; }
.pe-entitlements label:has(input:disabled) { opacity:.72; }
/* V13.5: casillas de "habilitado para esta empresa" pegadas al valor que gobiernan,
   en vez de todas amontonadas arriba (cada opción en su zona). */
/* Permisos "habilitado para esta empresa": SOLO un tick pequeño y su texto en la
   misma línea, sin recuadro ni píldora alrededor.
   OJO: hay que ganar en especificidad a
   `.admin-config-panel .pe-grid input{width:100%;min-height:36px}` (línea ~5203),
   que si no estira el checkbox hasta convertirlo en una elipse gigante. */
.pe-perm { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.pe-perm label,
.admin-config-panel .pe-grid .pe-perm label { display:flex; align-items:center; gap:7px; margin:0; padding:0; border:0; background:none; border-radius:0; min-height:0; font-size:11.5px; font-weight:600; color:var(--fg-2); line-height:1.3; cursor:pointer; }
.admin-config-panel .pe-grid .pe-perm input[type="checkbox"] {
  appearance:auto; -webkit-appearance:auto;
  width:14px; height:14px; min-width:14px; max-width:14px; min-height:14px; flex:0 0 14px;
  margin:0; padding:0; border:0; border-radius:0; background:none; accent-color:#2563eb; cursor:pointer;
}
.pe-perm label:has(input:checked) { color:#1d4ed8; font-weight:700; }
.pe-perm label:has(input:disabled) { opacity:.55; cursor:default; }
.admin-config-panel .pe-grid .pe-perm input[type="checkbox"]:disabled { cursor:default; }
.pe-role-checks { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:4px; }
.pe-role-checks label { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--fg-2); cursor:pointer; }
.pe-role-checks label:has(input:checked) { color:#1d4ed8; font-weight:700; }
.menu-layout-panel { margin-top: 14px; }
.menu-layout-help { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid #d9e5f7; border-radius: 10px; background: #f5f9ff; color: #536a8b; font-size: 12px; }
.menu-layout-groups { display: grid; gap: 10px; }
.menu-layout-group { border: 1px solid #d7e3f5; border-radius: 12px; background: #fff; overflow: hidden; }
.menu-layout-group > header { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f2f6fd; border-bottom: 1px solid #d7e3f5; }
.menu-layout-group-title { flex: 1; min-width: 0; border: 1px solid #cbd9ed; border-radius: 7px; padding: 7px 9px; font-weight: 800; background: #fff; }
.menu-layout-group-actions, .menu-layout-page-actions { display: inline-flex; gap: 4px; }
.menu-layout-group-actions button, .menu-layout-page-actions button { width: 28px; height: 28px; padding: 0; border: 1px solid #c8d7ee; border-radius: 7px; background: #fff; color: #244ba9; font-weight: 800; }
.menu-layout-group-actions button:disabled, .menu-layout-page-actions button:disabled { opacity: .35; cursor: default; }
.menu-layout-pages { display: grid; gap: 5px; padding: 8px; }
.menu-layout-page { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 6px; border: 1px solid #e0e8f4; border-radius: 8px; }
.menu-layout-page-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.menu-layout-page select { max-width: 180px; padding: 5px 7px; border: 1px solid #d4e0f1; border-radius: 6px; background: #fff; font-size: 11px; }
.menu-layout-save { border-color: #315bd9; background: #315bd9; color: #fff; }
.menu-layout-actions { flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
@media (max-width: 700px) { .menu-layout-page { flex-wrap: wrap; } .menu-layout-page-label { flex-basis: calc(100% - 42px); } .menu-layout-page select { flex: 1; max-width: none; } }
.pe-grid > label > small { display:block; margin-top:4px; color:var(--fg-3); font-size:11px; font-weight:600; line-height:1.35; }
.pe-divider { display:flex; align-items:center; gap:10px; margin:18px 0 2px; color:var(--fg-3); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
/* V68: tick "contratado" que solo ve el superadmin, encima de cada bloque
   de nube (Documentos/Partes/Justificantes). */
.pe-nube-contratado { display:flex; align-items:center; gap:6px; margin:2px 0 8px; padding:6px 10px; background:#fff7e6; border:1px dashed #e8b93f; border-radius:var(--r-sm); font-size:12.5px; font-weight:700; color:#8a6100; cursor:pointer; width:fit-content; }
.pe-nube-contratado small { font-weight:600; color:#a17a1f; }
.pe-divider::after { content:''; height:1px; background:var(--line); flex:1; }
.pe-indice { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:10px 12px; margin:0 0 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-soft, #f8fafc); }
.pe-indice-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-right:2px; }
.pe-indice a { font-size:12px; font-weight:700; color:var(--blue); text-decoration:none; padding:3px 8px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.pe-indice a:hover { background:var(--blue-soft); }
@media (max-width:760px){.pe-commercial{grid-template-columns:1fr}.pe-entitlements{grid-template-columns:1fr}}

body:not([data-active-section="today"]) .top-actions .export-btn {
  padding-inline: 14px !important;
  white-space: nowrap !important;
}


/* V9.7: histórico de partes por empresa y obra */
.nav-item[data-section="partesGenerados"]::before { content: "📚"; }
#partesGeneradosSection .pg-controls { grid-template-columns:minmax(190px,.8fr) 150px 150px minmax(260px,1fr) auto;align-items:end; }
#partesGeneradosSection .pg-controls button { height:40px;white-space:nowrap; }
.pg-company-field{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:9px 12px;border:1px solid #dbe4f0;border-radius:12px;background:#fff}
.pg-company-field span{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.pg-company-field strong{font-size:16px;color:#172033}.pg-company-field small{font-size:10px;color:#64748b}
.pg-resumen{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.pg-chip,.pg-estado,.pg-tipo{display:inline-flex;align-items:center;width:max-content;border-radius:999px;font-size:11px;font-weight:850;padding:5px 9px;white-space:nowrap}
.pg-chip.total{background:#e0e7ff;color:#3730a3}.pg-chip.pendiente,.pg-estado.pendiente{background:#dbeafe;color:#1e40af}.pg-chip.firmado,.pg-estado.firmado{background:#dcfce7;color:#166534}.pg-chip.anulado,.pg-estado.anulado{background:#e2e8f0;color:#475569}.pg-tipo.diario{background:#fef3c7;color:#92400e}.pg-tipo.semanal{background:#ede9fe;color:#5b21b6}
.pg-lista{padding:12px 16px 18px}.pg-obras-grid{display:block}.pg-obras-grid>.empty-state{margin:10px 0}.pg-obras-head,.pg-obra-card{display:grid;grid-template-columns:minmax(270px,2fr) 72px 72px 86px minmax(205px,1.15fr) 135px 28px;gap:10px;align-items:center}.pg-obras-head{padding:0 14px 7px;color:#64748b;font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.pg-obras-head span:not(:first-child){text-align:center}
.pg-obra-card{width:100%;min-height:54px;margin:0 0 8px;padding:9px 14px;text-align:left;border:1px solid #dbe4f0;border-radius:13px;background:#fff;color:#172033;box-shadow:0 5px 16px rgba(15,23,42,.045);transition:.16s ease}
.pg-obra-card:hover{transform:translateX(2px);border-color:#93b4ff;background:#f8fbff;box-shadow:0 8px 22px rgba(37,99,235,.1)}.pg-obra-name{min-width:0}.pg-obra-name small{display:block;font-size:9px;letter-spacing:.08em;color:#64748b}.pg-obra-name strong{display:block;margin-top:2px;font-size:14px;line-height:1.3;overflow-wrap:anywhere}.pg-obra-number{text-align:center}.pg-obra-number b{display:block;font-size:15px;color:#172033}.pg-obra-number small{display:none;font-size:9px;color:#64748b}.pg-obra-arrow{font-size:25px;line-height:1;color:#5275d8;text-align:right}
.pg-obra-status{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:#526078;flex-wrap:wrap}.pg-obra-status i{width:8px;height:8px;border-radius:50%;margin-left:4px}.pg-obra-status i:first-child{margin-left:0}.pg-obra-status i.pendiente{background:#60a5fa}.pg-obra-status i.firmado{background:#4ade80}.pg-obra-last{text-align:center;font-size:11px;font-weight:750;color:#64748b}
.pg-modal-bg{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}.pg-modal{width:min(1480px,98vw);max-height:94vh;overflow:auto;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.3)}.pg-modal-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;gap:20px;padding:20px 22px 14px;border-bottom:1px solid #e2e8f0;background:rgba(255,255,255,.97)}.pg-modal-head h2{margin:3px 0;font-size:21px}.pg-modal-head p{margin:0;color:#64748b}.pg-modal-company{font-size:11px;font-weight:850;letter-spacing:.08em;color:#315ac7;text-transform:uppercase}.pg-modal-close{width:40px;height:40px;padding:0;border-radius:12px;font-size:24px;background:#eef2f7;color:#334155}
.pg-modal-controls{display:grid;grid-template-columns:145px 145px 170px 150px minmax(230px,1fr) auto;gap:10px;align-items:end;padding:14px 22px;background:#f8fafc}.pg-modal-controls label{display:flex;flex-direction:column;gap:5px}.pg-modal-controls label>span{font-size:11px;font-weight:800;color:#64748b}.pg-modal-controls input,.pg-modal-controls select,.pg-modal-controls button{height:40px}.pg-modal-summary{display:flex;justify-content:space-between;gap:12px;padding:12px 22px;color:#64748b}.pg-modal-summary strong{color:#172033}.pg-modal [data-pg-historial]{padding:0 22px 22px}.pg-table{min-width:1120px}.pg-table td{vertical-align:middle}.pg-acciones{display:flex;gap:6px}.pg-acciones button{min-height:32px;padding:5px 9px;white-space:nowrap}
.pg-delete-button{border-color:#fecaca!important;background:#fff1f2!important;color:#b42318!important}.pg-delete-button:hover{border-color:#fda4af!important;background:#ffe4e6!important}.pg-delete-button:disabled{opacity:.6;cursor:wait}
@media(max-width:1150px){#partesGeneradosSection .pg-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.pg-company-field{grid-column:span 1}.pg-search{grid-column:span 2}.pg-obras-head,.pg-obra-card{grid-template-columns:minmax(220px,1.7fr) 60px 60px 70px minmax(165px,1fr) 110px 24px}.pg-modal-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.pg-modal-search{grid-column:span 2}}
@media(max-width:760px){#partesGeneradosSection .pg-controls{grid-template-columns:1fr}.pg-company-field,.pg-search{grid-column:auto}.pg-resumen{justify-content:flex-start}.pg-lista{padding:9px}.pg-obras-head{display:none}.pg-obra-card{grid-template-columns:repeat(3,1fr);gap:9px;padding:12px}.pg-obra-name{grid-column:1/3}.pg-obra-arrow{grid-column:3;grid-row:1;text-align:right}.pg-obra-number small{display:block}.pg-obra-status,.pg-obra-last{grid-column:1/-1;justify-content:flex-start;text-align:left}.pg-modal-bg{padding:0}.pg-modal{width:100%;height:100%;max-height:none;border-radius:0}.pg-modal-head{padding:14px}.pg-modal-controls{grid-template-columns:1fr;padding:12px 14px}.pg-modal-search{grid-column:auto}.pg-modal-summary{padding:10px 14px}.pg-modal [data-pg-historial]{padding:0 14px 18px}}

/* V9.8: detalle por encima del historial y menú agrupado */
.pf-modal-bg{z-index:1500!important}
.nav-item[data-section="userGenerator"]::before{content:"\2795"}
.sidebar{grid-template-rows:auto minmax(0,1fr) auto auto!important;gap:10px!important}
.nav{display:block!important;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 3px 6px 0!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.nav-group{display:grid;gap:4px;margin-bottom:8px}.nav-group:last-child{margin-bottom:0}.nav-group:not(:has(.nav-item:not(.hidden))){display:none}
.nav .nav-group-label{display:block!important;padding:7px 10px 2px;color:rgba(219,232,255,.66);font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}


/* V9.10: grupos laterales plegables y sin cabeceras vacias */
.nav .nav-group-label.nav-group-toggle{display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:25px;margin:0;padding:7px 10px 2px;border:0;border-radius:7px;background:transparent;box-shadow:none;color:rgba(219,232,255,.72);font-size:9px;font-weight:900;letter-spacing:.11em;line-height:1;text-align:left;text-transform:uppercase;cursor:pointer}
.nav .nav-group-label.nav-group-toggle:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-group-chevron{font-size:15px;line-height:1;transition:transform .16s ease}
.nav-group.collapsed .nav-group-chevron{transform:rotate(-90deg)}
.nav-group.collapsed .nav-item{display:none!important}
.nav-group.hidden{display:none!important}

/* V9.12: contador de la cola no bloqueante del generador */
#parteConfigLink[data-queue-count]::after{display:none!important}.partes-queue-side-notice{position:fixed;top:96px;right:18px;z-index:1400;max-width:min(360px,calc(100vw - 36px));padding:12px 16px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1e3a8a;box-shadow:0 10px 28px rgba(15,23,42,.18);font:700 12px/1.35 system-ui,-apple-system,sans-serif;text-align:left;cursor:pointer}.partes-queue-side-notice:hover{filter:brightness(.98);transform:translateY(-1px)}.partes-queue-side-notice-error{border-color:#fecaca;background:#fff1f2;color:#991b1b}.partes-queue-side-notice-warning{border-color:#fde68a;background:#fffbeb;color:#92400e}.partes-queue-side-notice-success{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}@media(max-width:720px){.partes-queue-side-notice{top:auto;right:12px;bottom:12px;max-width:calc(100vw - 24px)}}

/* V9.13: remitentes de WhatsApp con nombre comercial */
.pe-senders-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:4px 0 12px}.pe-senders-head strong{font-size:14px}.pe-senders-head p{margin:4px 0 0;max-width:720px}.pe-senders-list{display:grid;gap:9px;margin-bottom:18px}.pe-sender-row{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(150px,1fr) minmax(145px,.8fr) 80px 105px 38px;gap:9px;align-items:end;padding:12px;border:1px solid #dce5f1;border-radius:13px;background:#f8fafc}.pe-sender-row label>span,.pe-sender-service>span{display:block;margin-bottom:5px;color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase}.pe-sender-row input,.pe-sender-row select{width:100%;height:38px}.pe-sender-check{text-align:center}.pe-sender-check input{width:20px;height:20px}.pe-sender-service{padding-bottom:5px}.pe-sender-service b{font-size:11px;color:#315ac7}.pe-sender-remove{width:36px;height:36px;padding:0;border:1px solid #fecaca;border-radius:10px;background:#fff1f2;color:#b42318;font-size:20px}.pe-senders-empty{padding:17px;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b;text-align:center;font-size:12px}@media(max-width:1050px){.pe-sender-row{grid-template-columns:1fr 1fr 1fr}.pe-sender-remove{justify-self:end}}@media(max-width:680px){.pe-senders-head{display:block}.pe-senders-head button{margin-top:10px}.pe-sender-row{grid-template-columns:1fr 1fr}.pe-sender-row>label:first-child,.pe-sender-row>label:nth-child(2),.pe-sender-service{grid-column:1/-1}}


/* V10.5: selector visible del número emisor cuando hay varias conexiones. */
.difusion-remitente{display:grid;grid-template-columns:minmax(110px,auto) minmax(220px,420px);align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid #cfe0f6;border-radius:12px;background:#f7fbff}
.mapa-filtros{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;margin:14px 0}.mapa-filtros label span{display:block;font-size:11px;font-weight:800;color:#64748b;margin-bottom:5px}.mapa-filtros input,.mapa-filtros select{width:100%;min-height:38px}.mapa-canvas{position:relative;min-height:420px;overflow:hidden;border:1px solid #cbd9ee;border-radius:18px;background:linear-gradient(135deg,#eef6ff,#f8fbff 55%,#e6f2ff);box-shadow:inset 0 0 0 1px #fff}.mapa-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(70,108,170,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(70,108,170,.1) 1px,transparent 1px);background-size:40px 40px;transform:rotate(-2deg) scale(1.1)}.mapa-points{position:absolute;inset:0}.mapa-point{position:absolute;transform:translate(-50%,-50%);min-width:28px;height:28px;padding:0 7px;border:3px solid #fff;border-radius:999px;background:#2563eb;color:#fff;font-size:11px;font-weight:900;box-shadow:0 4px 12px rgba(30,64,175,.35);cursor:pointer;z-index:2}.mapa-point.salida{background:#f59e0b}.mapa-point.fuera{background:#dc2626}.mapa-point.selected{z-index:5;min-width:170px;border-radius:10px;background:#172554;font-size:10px;white-space:nowrap}.mapa-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#64748b;font-weight:700}.mapa-scale{position:absolute;right:12px;bottom:10px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.85);color:#64748b;font-size:10px}.mapa-estado{margin:8px 0}.mapa-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0;color:#475569;font-size:12px;font-weight:700}.mapa-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#2563eb;margin-right:4px}.mapa-dot.salida{background:#f59e0b}.mapa-dot.fuera{background:#dc2626}.mapa-dot.obra{background:#0f766e}.mapa-listado{margin-top:10px;max-height:340px;overflow:auto}.mapa-table-wrap{overflow:auto}.mapa-table-wrap table{min-width:700px}@media(max-width:1050px){.mapa-filtros{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.mapa-filtros{grid-template-columns:1fr 1fr}.mapa-canvas{min-height:330px}}
.difusion-remitente>span{font-size:12px;font-weight:850;color:#334155}
.difusion-remitente select{width:100%;min-height:40px}
@media(max-width:680px){.difusion-remitente{grid-template-columns:1fr;gap:6px}}
/* V16: mapa local responsive y legible en cualquier resolucion. */
.mapa-fichajes-panel{max-width:100%;overflow:hidden}.mapa-canvas{width:100%;height:clamp(300px,52vh,620px);min-height:300px}.mapa-listado{max-width:100%}
@media(max-width:1200px){.mapa-filtros{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:760px){.mapa-filtros{grid-template-columns:1fr 1fr}.mapa-canvas{height:52vh;min-height:280px}.mapa-point.selected{min-width:130px;font-size:9px}.mapa-leyenda{gap:8px;font-size:11px}}
@media(max-width:480px){.mapa-filtros{grid-template-columns:1fr}.mapa-canvas{height:48vh;min-height:260px}}
/* V10.11: Administrar agrupado y legible. */
.admin-config-panel{border:1px solid #dbe5f4;box-shadow:0 14px 32px rgba(27,55,104,.08)}
.admin-config-panel .pe-commercial{display:grid;grid-template-columns:minmax(170px,.35fr) 1fr;gap:18px;align-items:start;padding:14px;border:1px solid #e3ebf7;border-radius:14px;background:linear-gradient(135deg,#f8fbff,#fff)}
.admin-config-panel .pe-group-title,.admin-config-panel .pe-divider span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#617493}
.admin-config-panel .pe-entitlements{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:8px}
.admin-config-panel .pe-entitlements label{min-height:38px;padding:9px 10px;border:1px solid #d8e4f5;border-radius:10px;background:#fff;font-size:12px;font-weight:700;color:#273957}
.admin-config-panel .pe-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}
.admin-config-panel .pe-grid label{padding:9px;border:1px solid #e3ebf7;border-radius:10px;background:#fbfdff}
.admin-config-panel .pe-grid label>span{display:block;min-height:28px;font-size:11px;font-weight:800;color:#617493}
.admin-config-panel .pe-grid input,.admin-config-panel .pe-grid select{width:100%;min-height:36px}
@media(max-width:1050px){.admin-config-panel .pe-commercial{grid-template-columns:1fr}.admin-config-panel .pe-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:640px){.admin-config-panel .pe-grid{grid-template-columns:1fr}}

/* V67: "Ajustes de empresa" -- panel de Administrar donde el superadmin
   decide, campo a campo, que se cede a la empresa; y la propia pantalla
   delegada ("Avisos y contacto"). Mismo lenguaje visual que el resto de
   Administrar (bordes #e3ebf7, texto #617493, fondo #fbfdff/#f8fbff). */
.ajustes-delegados-lista{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.ajustes-delegados-grupo{border:1px solid #e3ebf7;border-radius:14px;background:#fbfdff;padding:14px 16px}
.ajustes-delegados-grupo h4{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#617493}
.ajustes-delegados-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid #edf2fa}
.ajustes-delegados-fila:first-of-type{border-top:0;padding-top:0}
.ajustes-delegados-fila span{font-size:13px;font-weight:600;color:#273957}
.ajustes-delegados-fila select{min-width:210px;padding:7px 10px;border:1px solid #d8e4f5;border-radius:10px;background:#fff;font-size:12.5px;font-weight:700;color:#1d4ed8;cursor:pointer}

.avisos-empresa-panel{max-width:820px}
.avisos-empresa-lista{display:flex;flex-direction:column;gap:22px;margin-top:14px}
/* V67 (4): "Ajustes de empresa" en filas -- antes cada grupo era una tarjeta
   con degradado y los campos una rejilla de tarjetas sueltas ("esquema de
   cuadros"); ahora cada grupo es solo un título ligero y sus campos forman
   una lista de filas (etiqueta a la izquierda, control a la derecha) dentro
   de una única tarjeta blanca -- mismo lenguaje visual que .pe-grid-rows. */
.ajustes-empresa-grupo{margin:0}
.ajustes-empresa-grupo h4{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
/* V72: sub-acordeón por grupo dentro de "Avisos y contacto"/"Administrar"
   (pedido explícito: agrupar y que cada bloque solo se vea al desplegarlo,
   antes eran 17/varios campos en una sola pared). Mismo lenguaje visual que
   .pe-accordion-toggle pero más compacto, al ser un nivel anidado. */
.ajustes-subgrupo-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 14px;background:#f8fbff;border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;text-align:left;font:inherit;margin-bottom:0}
.ajustes-subgrupo-toggle:hover{background:#eef5ff}
.ajustes-subgrupo-titulo{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#617493}
.ajustes-subgrupo-toggle[aria-expanded="true"]{border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
.ajustes-subgrupo-toggle[aria-expanded="true"] .ajustes-subgrupo-titulo{color:var(--blue-ink,#1747af)}
.ajustes-subgrupo-toggle .pe-accordion-chevron{border-color:#617493}
.ajustes-subgrupo-toggle[aria-expanded="true"] .pe-accordion-chevron{transform:rotate(-135deg);margin-top:3px}
.ajustes-empresa-grid.hidden,#aeItemAvisosEmpresa .hidden,.ajustes-delegados-grupo>.hidden{display:none}
.ajustes-empresa-grid:not(.hidden){border-radius:0 0 var(--r-lg) var(--r-lg);border-top:0}
.ajustes-empresa-grid{
  display:flex;flex-direction:column;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.ajustes-empresa-grid label{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 18px;border:0;border-bottom:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--fg-1);text-transform:none;letter-spacing:0;
}
.ajustes-empresa-grid label:last-child{border-bottom:0}
.ajustes-empresa-grid label.field-wide{flex-direction:column;align-items:stretch;gap:8px}
.ajustes-empresa-grid input,.ajustes-empresa-grid select{
  min-width:200px;max-width:320px;min-height:36px;flex:0 0 auto;
  padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:13px;font-weight:600;color:#1e293b;font-family:inherit;
}
.ajustes-empresa-grid label.field-wide input,.ajustes-empresa-grid label.field-wide textarea{max-width:none;width:100%}
.ajustes-empresa-grid textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-family:inherit;resize:vertical;min-height:64px}
.ajustes-empresa-check{padding-top:14px !important;justify-content:flex-start !important;gap:10px !important}
.ajustes-empresa-check span{font-size:14px;font-weight:600;color:var(--fg-1)}
@media(max-width:640px){
  .ajustes-delegados-fila{flex-wrap:wrap}.ajustes-delegados-fila select{min-width:100%}
  .ajustes-empresa-grid label{flex-direction:column;align-items:flex-start;gap:8px}
  .ajustes-empresa-grid input,.ajustes-empresa-grid select{width:100%;max-width:none}
}

/* V58: Administrar como acordeón (pedido del usuario -- "más visual", y
   sustituye el índice "Ir a:" de píldoras de ancho desigual, que en móvil
   se veía inconsistente frente al resto de controles de la app). Cada
   sección cierra por defecto: icono + título siempre visibles, contenido
   solo al abrir. Mismo tono que el resto de Administrar (bordes #e3ebf7,
   texto #617493), no una paleta nueva. */
.pe-accordion-item{border:1px solid #e3ebf7;border-radius:14px;background:#fff;margin:12px 0;overflow:hidden}
.pe-accordion-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;background:#fbfdff;border:0;cursor:pointer;text-align:left;font:inherit}
.pe-accordion-toggle:hover{background:var(--surface-tint,#eef5ff)}
.pe-accordion-icon{font-size:18px;line-height:1;flex:0 0 auto}
.pe-accordion-title{flex:1;font-size:13px;font-weight:800;color:var(--fg-1,#172033);letter-spacing:.01em}
.pe-accordion-chevron{flex:0 0 auto;width:9px;height:9px;border-right:2px solid #617493;border-bottom:2px solid #617493;transform:rotate(45deg);transition:transform .15s ease;margin-top:-3px}
.pe-accordion-toggle[aria-expanded="true"] .pe-accordion-chevron{transform:rotate(-135deg);margin-top:3px}
.pe-accordion-toggle[aria-expanded="true"]{background:var(--blue-soft,#e9f0ff)}
.pe-accordion-toggle[aria-expanded="true"] .pe-accordion-title{color:var(--blue-ink,#1747af)}
.pe-accordion-body{padding:4px 16px 16px}
.pe-accordion-body.hidden{display:none}
.pe-accordion-body .pe-divider{display:none}
@media(max-width:640px){
  .pe-accordion-toggle{padding:14px 14px;gap:10px}
  .pe-accordion-title{font-size:12.5px}
}

/* V42: "Conexiones de nube" > destinos, en formato lista (etiqueta a la
   izquierda en texto normal, control a la derecha) en vez de la rejilla de
   tarjetas que usa el resto de Administrar — pedido explícito del usuario
   ("en plan texto y a la derecha, como si fuese un índice"). Solo afecta a
   este panel: el resto de .admin-config-panel sigue con su rejilla de
   siempre.
   V67 (4): generalizado a clase reutilizable ".pe-grid-rows" -- pedido
   explícito al fusionar "Ajustes de empresa" en una sola página con
   acordeón ("más tipo filas, no en esquema de cuadros, estética conjunta").
   Se mantiene también el selector por ID de antes para no romper nada. */
.pe-grid.pe-grid-rows,
#nubeDestinosPanel .pe-grid{
  display:flex;flex-direction:column;gap:0;margin-bottom:10px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.pe-grid.pe-grid-rows>label,
#nubeDestinosPanel .pe-grid label{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 18px;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;
}
.pe-grid.pe-grid-rows>label:last-child,
#nubeDestinosPanel .pe-grid label:last-child{border-bottom:0}
.pe-grid.pe-grid-rows>label>span,
#nubeDestinosPanel .pe-grid label>span{
  display:block;min-height:0;font-size:14px;font-weight:600;color:var(--fg-1);
  text-transform:none;letter-spacing:0;flex:1 1 auto;min-width:0;
}
.pe-grid.pe-grid-rows select,
.pe-grid.pe-grid-rows input[type="text"],
#nubeDestinosPanel .pe-grid select,
#nubeDestinosPanel .pe-grid input[type="text"]{
  width:auto;min-width:200px;max-width:320px;min-height:36px;flex:0 0 auto;
}
#nubeDestinosPanel .pe-grid .toolbar{display:flex;align-items:center;gap:8px;flex:0 1 auto;justify-content:flex-end}
#nubeDestinosPanel .pe-grid .toolbar input[type="text"]{min-width:180px}
#nubeDestinosPanel .pe-grid .toolbar .panel-muted{text-align:right}
@media(max-width:640px){
  .pe-grid.pe-grid-rows>label,
  #nubeDestinosPanel .pe-grid label{flex-direction:column;align-items:flex-start;gap:8px}
  .pe-grid.pe-grid-rows select,
  .pe-grid.pe-grid-rows input[type="text"],
  #nubeDestinosPanel .pe-grid select,
  #nubeDestinosPanel .pe-grid input[type="text"]{width:100%;max-width:none}
  #nubeDestinosPanel .pe-grid .toolbar{width:100%}
}

/* V67 (4): tarjetas del acordeon "Ajustes de empresa" -- envoltorio ligero
   (sin fondo propio, el acordeon ya lo da) para que las 4 secciones
   compartan el mismo aire visual dentro de cada bloque plegable. */
.ae-accordion-intro{margin:0 0 12px;color:var(--fg-3);font-size:13px;line-height:1.5}
.ae-nube-cuenta-info{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto}
@media(max-width:640px){.ae-nube-cuenta-info{align-items:flex-start;width:100%}}

.mapa-leaflet{width:100%;height:100%;min-height:300px;background:#e8f1fb}.mapa-leaflet .leaflet-control-attribution{font-size:10px}


/* V18 — móvil: menú completo y controles sin bordes cortados. */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app { grid-template-columns: minmax(0, 1fr) !important; width: 100%; }
  .content, .content section.section, .panel, .details, .summary-grid { min-width: 0 !important; max-width: 100% !important; }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    width: min(88vw, 340px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease !important;
    overflow: hidden !important;
    z-index: 3100 !important;
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .sidebar .nav {
    display: block !important;
    visibility: visible !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px 18px !important;
  }
  .sidebar .nav-group, .sidebar .nav-item { display: grid !important; visibility: visible !important; }
  .sidebar .nav-group.hidden, .sidebar .nav-item.hidden { display: none !important; }
  .mobile-menu-backdrop { z-index: 3090 !important; }
  label, .form-grid > *, .mapa-filtros > *, .pg-controls > * { min-width: 0 !important; }
  input[type="date"], input[type="datetime-local"], input[type="time"], select, .mapa-filtros input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* V19: cola central: casilla siempre interactiva y visible. */
.pe-check{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.pe-check input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;width:16px;height:16px;min-width:16px;margin:2px 0 0;accent-color:#2563eb;cursor:pointer}.pe-check span{font-weight:700}.pe-check small{display:block;flex-basis:100%;margin-left:24px;color:var(--fg-3);font-size:11px;line-height:1.35}
.pe-worker-list{grid-column:1/-1;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:1px;background:var(--line)}
.pe-worker-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 10px;background:#fff}
.pe-worker-nombre{flex:1;min-width:160px;font-weight:700}
.pe-worker-nombre small{display:block;font-weight:500;color:var(--fg-3)}
.pe-worker-row .pe-check{padding:4px 8px}
.pe-worker-row input[type="number"]{width:90px}
/* V88: un boton suelto (sin <label><span> encima, a diferencia de sus
   vecinos) quedaba pegado arriba de la fila en vez de a la altura de los
   inputs -- alinearlo al final de su celda de grid lo deja a la misma
   altura que el resto de campos de esa fila. */
.pe-grid > button, .pe-grid > .secondary-button, .pe-grid > .primary-button { align-self: end; }
.pe-worker-row-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.pe-worker-row-btn{width:24px;height:24px;min-width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--line);background:#f1f5fb;cursor:pointer;font-size:13px;line-height:1}
.pe-worker-row-btn:hover{filter:brightness(0.95)}
.pe-worker-row-btn-turno{background:#fff2d9;border-color:#f0c987}
.pe-worker-row-btn-obra{background:#e3f6e8;border-color:#a9dab8}
.pe-worker-row-btn-avisos{background:#e6edff;border-color:#adc0f2}
.pe-worker-row-editor{grid-column:1/-1;flex-basis:100%;display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px;border-radius:8px;background:#f8fafc;border:1px solid var(--line)}
.pe-worker-row-editor select{flex:1;min-width:0}
/* V89 (ronda 4): el tick maestro reutilizaba .pe-check (fondo+borde+relleno
   propios de una tarjeta), y al quedar solo en su propia celda de la
   rejilla (sin nada más dentro) se veía como una caja vacía enorme con un
   tick perdido en medio. Ahora es un tick suelto, mismo tamaño que los de
   cada fila, pensado para ir DENTRO de un .pe-toolbar-inline junto al
   buscador y el botón de filtro, no en su propia columna de rejilla. */
.pe-check-master{display:inline-flex;align-items:center;margin:0;cursor:pointer}
.pe-check-master input[type="checkbox"]{width:16px;height:16px;margin:0;accent-color:#2563eb;cursor:pointer}
/* .toolbar y .pe-toolbar-inline nunca tuvieron reglas propias (se apoyaban
   en el flujo por defecto de <label>/<button>, de ahí el desalineado) --
   con varios controles de alturas distintas (un tick, un <label><select>,
   un botón suelto) hace falta flex real para que todos compartan la misma
   línea base. */
.pe-toolbar-inline{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}
.pe-toolbar-inline > .pe-check-master{align-self:center}
.pe-toolbar-inline > label > span{display:block;font-size:12px;color:var(--fg-3);font-weight:700;margin-bottom:4px}
.pe-toolbar-label{display:block;font-size:12px;color:var(--fg-3);font-weight:700;margin-bottom:4px}
/* V91: las 3 filas de "aplicar a los marcados" de Turnos quedaban pegadas
   unas a otras, sin separación visual -- cada una pasa a ser su propia
   tarjeta suelta (mismo look que .pe-worker-row-editor, ya usado en esta
   misma página) para que se lea de un vistazo dónde empieza y acaba cada
   acción. El tick es un círculo verde dentro del propio botón, patrón ya
   habitual en botones de "confirmar/aplicar" de otros paneles. */
.pe-toolbar-aplicar{padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px solid var(--line)}
.pe-btn-aplicar{display:inline-flex;align-items:center;gap:8px}
.pe-btn-aplicar-tick{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;min-width:16px;border-radius:50%;background:#16a34a;color:#fff;font-size:11px;line-height:1}

/* V89: Avisos -- alternar "Avisos"/"Trabajadores". */
.avisos-vista-toggle .secondary-button.active{background:#1747af;color:#fff;border-color:#1747af}
/* V101: "Plantillas" / "Variables" como pestañas de una misma pagina (antes
   Variables era una pagina propia) -- mismo patron ya usado en Avisos. */
.pe-tabs{margin-bottom:16px}
.pe-tabs .pe-tab-btn.active{background:#1747af;color:#fff;border-color:#1747af}
/* V90: "Quién lo tiene" ahora se ve siempre (antes solo con alcance
   "seleccion") -- .pe-check-master-slot es un envoltorio invisible
   (display:contents) para poder cambiar solo esa celda del .pe-grid
   ("Marcar todos" <-> aviso de "activo para todos") sin redibujar el
   acordeón entero y perder si estaba abierto. El bloque de turno opcional
   sigue apareciendo y desapareciendo según el alcance, por eso conserva
   su propio wrapper con margen/borde. */
.pe-check-master-slot{display:contents}
.avisos-otro-turno-wrap{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
/* V90: la pestaña "Trabajadores" pasa de matriz (una columna por tipo,
   ilegible con muchos tipos) a una lista simple con un botón "Ver avisos"
   por fila que abre el modal de esa persona -- mismo patrón que "Trabajadores"
   con su modal de Permisos. */
.avisos-matriz-fila{justify-content:space-between}
.avisos-matriz-fila .avisos-matriz-count{color:var(--fg-3);font-size:12px;white-space:nowrap}
.avisos-matriz-destacada{background:#fff6d6!important;transition:background 1.2s ease}



/* V19: telefono y lapiz de edicion en una sola linea compacta. */

.worker-phone-line{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}.worker-phone-number{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workers-management-table .worker-phone-line .btn-edit-telefono{margin:0;width:18px;height:18px;font-size:11px}



/* V19: iconos compactos para mapa e historial documental. */

.nav-icon{display:inline-flex;width:1.25em;justify-content:center;margin-right:4px}

.doc-his-link,.doc-his-copy{display:inline-flex;gap:4px;margin:2px;padding:4px 7px;font-size:11px}.doc-his-delete{padding:4px 7px;font-size:11px}

/* V21 document history/menu alignment */

.nav-item{display:flex;align-items:center;gap:8px;min-height:42px;white-space:nowrap;overflow:hidden}

.nav-item::before{flex:0 0 24px;width:24px;text-align:center;line-height:1}

.nav-icon{display:inline-flex;flex:0 0 24px;width:24px;min-width:24px;justify-content:center;align-items:center;margin-right:0;line-height:1}

.doc-his-link,.doc-his-copy,.doc-his-download,.doc-his-resend,.doc-his-delete{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:32px;margin:2px;padding:4px 8px;font-size:11px}

.doc-his-download{color:#1742b7;background:#eef5ff;border:1px solid #9bb4d6;border-radius:8px;text-decoration:none}

.data-table td:last-child{white-space:nowrap}



/* V21.2 consistent document/map icons */

.nav-item[data-section="mapaFichajes"],.nav-item[data-section="documentosEnviados"]{display:flex!important;align-items:center!important;gap:8px!important;min-height:46px!important;}

.nav-item[data-section="mapaFichajes"]::before{content:"⌖"!important;display:inline-flex!important;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:#5479e8;color:#fff!important;font:700 16px/1 Arial,sans-serif!important;opacity:1!important;}

.nav-item[data-section="documentosEnviados"]::before{content:"▤"!important;display:inline-flex!important;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:#5479e8;color:#fff!important;font:700 15px/1 Arial,sans-serif!important;opacity:1!important;}

.nav-item[data-section="mapaFichajes"] .nav-icon,.nav-item[data-section="documentosEnviados"] .nav-icon{display:none!important;}



/* V21.3 documentos enviados: acciones compactas con iconos */

.doc-his-links{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;white-space:nowrap}.doc-his-actions{display:table-cell!important;vertical-align:middle!important;white-space:nowrap!important;text-align:left!important}

.doc-his-icon{width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;line-height:1;font-size:16px!important;white-space:nowrap;border-radius:8px!important}

.doc-his-icon:hover{transform:translateY(-1px);filter:brightness(1.03)}

.doc-his-links span[aria-hidden],.doc-his-actions span[aria-hidden]{pointer-events:none}



/* V21.4: acciones de documentos en una sola fila; el tooltip conserva la descripcion */

.doc-his-actions .doc-his-icon{vertical-align:middle!important;margin:0 2px 0 0!important}





/* V23: visor integrado de justificantes. Evita abrir pestañas nuevas. */

.justificante-viewer-modal{position:fixed;inset:0;z-index:9999;background:rgba(9,20,43,.72);padding:clamp(12px,3vw,40px);display:grid;place-items:center;backdrop-filter:blur(3px)}

.justificante-viewer-card{width:min(1120px,100%);height:min(880px,calc(100vh - 24px));background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.38);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}

.justificante-viewer-card header{min-height:64px;padding:12px 18px;border-bottom:1px solid #dce6f6;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(110deg,#f7faff,#edf4ff)}

.justificante-viewer-card header small{display:block;color:#456bd4;font-weight:800;font-size:11px;letter-spacing:.08em}.justificante-viewer-card header strong{display:block;color:#14223c;max-width:64vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.justificante-viewer-actions{display:flex;align-items:center;gap:8px}.justificante-viewer-close{width:38px;height:38px;border:1px solid #cedbf0;border-radius:10px;background:#fff;color:#26344d;font-size:27px;line-height:1;cursor:pointer}.justificante-viewer-close:hover{background:#edf3ff}

.justificante-viewer-card main{min-height:0;padding:14px;background:#eef3fa;display:grid;place-items:center}.justificante-viewer-frame{width:100%;height:100%;border:0;background:#fff;border-radius:8px}.justificante-viewer-image{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:8px}.justificante-viewer-empty{display:grid;gap:8px;text-align:center;color:#42536f}.day-total-doc{white-space:nowrap}

@media(max-width:640px){.justificante-viewer-modal{padding:0}.justificante-viewer-card{width:100%;height:100vh;border-radius:0}.justificante-viewer-card header{padding:10px 12px}.justificante-viewer-card header strong{max-width:42vw}.justificante-viewer-card main{padding:6px}}



/* V23: festivos de convenio para una o varias personas */

.vacation-workers-multi { grid-column: 1 / -1; }

.vacation-workers-multi select { min-height: 164px; }

.vacation-workers-multi small { color: var(--fg-3); font-size: 12px; line-height: 1.35; }

.vacation-workers-checklist { min-height: 164px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }

.vacation-workers-checklist .checkbox-label { min-height: 26px; }

.vacation-multiple-toggle { margin-top: 2px; }

.tipo-ausencia-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }

.tipo-ausencia-form input[type="text"] { flex: 1 1 180px; min-width: 140px; }

/* V42: todo en una sola línea (pedido explícito) — con "Permisos de

   visualización" convertido en botón que abre una ventanita, la fila ya

   pesa mucho menos y cabe entera; si aun así no cupiera en una pantalla muy

   estrecha, se deja scroll horizontal en vez de partirse en dos líneas. */

/* V67: antes era flex con las opciones pegadas justo despues de "clave" --

   como "clave" no tiene un ancho fijo (varia de una fila a otra: "vacaciones"

   vs "baja"...), las casillas empezaban en un sitio distinto en cada fila y

   dejaban un hueco suelto irregular antes de los botones. Con grid, cada

   columna tiene sitio fijo y las opciones quedan centradas en la suya,

   alineadas entre todas las filas. */

.tipo-ausencia-row {

  display: grid; grid-template-columns: 150px 110px minmax(0, 1fr) auto;

  align-items: center; gap: 14px; padding: 10px 14px;

  border: 1px solid var(--line); border-radius: var(--r-sm);

  overflow-x: auto;

}

.tipo-ausencia-row .tipo-ausencia-etiqueta { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tipo-ausencia-row .tipo-ausencia-clave { color: var(--fg-3); font-size: 12px; white-space: nowrap; }

.tipo-ausencia-row .tipo-ausencia-opciones {

  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;

  gap: 6px 18px;

}

.tipo-ausencia-row label { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }

/* V42: "Permisos" y "Borrar" van pegados entre sí (antes el margin-left:auto

   iba solo en "Borrar", así que quedaba un hueco suelto entre los dos

   botones). V67: ya no hace falta margin-left:auto -- la columna "auto" del

   grid ya los deja al final de la fila. */

.tipo-ausencia-row .tipo-ausencia-actions { display: inline-flex; gap: 8px; flex: 0 0 auto; }

.tipo-ausencia-row .tipo-ausencia-permisos-btn,

.tipo-ausencia-row .tipo-ausencia-borrar { flex: 0 0 auto; white-space: nowrap; margin-left: 0; }

.tipo-ausencia-row.inactivo { opacity: .55; }

@media (max-width: 860px) {

  .tipo-ausencia-row { grid-template-columns: 1fr; gap: 8px; }

  .tipo-ausencia-row .tipo-ausencia-opciones { justify-content: flex-start; }

  .tipo-ausencia-row .tipo-ausencia-actions { justify-content: flex-start; }

}

.ep-header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }

.ep-header h2 { margin: 0; }

.ep-icon { flex: 0 0 auto; }

.ep-mensajes-individual { display: grid; gap: 10px; margin-top: 8px; }

.ep-mensaje-row { display: grid; gap: 4px; }

.ep-mensaje-row strong { font-size: 13px; }

.ep-mensaje-row textarea { width: 100%; resize: vertical; }

.vacation-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; margin: 4px 0 2px; padding: 10px 12px; border: 1px solid #c8d8f4; border-radius: 10px; background: #f4f8ff; color: #24365a; font-size: 12px; }

.vacation-progress strong { color: #2445a7; }

.vacation-progress-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.vacation-progress-bar { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #dce6f7; }

.vacation-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4f71e8,#3aa3c6); transition: width .18s ease; }

/* V143: listas de resultado (envío de resúmenes) dentro de .vacation-progress
   -- deben ocupar todo el ancho y comportarse como bloque normal, si no el
   grid de 2 columnas del contenedor las aplasta en la columna estrecha. */
.vacation-progress .ep-resultado-grupo { grid-column: 1 / -1; margin-top: 4px; }

.vacation-progress .ep-resultado-grupo ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }

.vacation-progress .ep-resultado-grupo li { margin: 2px 0; line-height: 1.4; }

.absence-hours-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }

.absence-hours-fields.hidden { display:none; }

@media (max-width:760px) { .absence-hours-fields { grid-template-columns:1fr; } }

.fichaje-pill-festivo { border-color: #8ecfbb; background: #eefaf5; }

.fichaje-pill-festivo .status { color: #19715b; }



/* V24: historial paginado, mismo contrato de datos */

.doc-history-table-wrap{overflow:auto;max-width:100%;}

.doc-history-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 4px 2px;color:var(--fg-3);font-size:13px;}

.doc-history-pager>div{display:flex;align-items:center;gap:10px;}

.doc-history-pager strong{color:var(--fg-2);font-size:12px;}

.doc-history-pager button:disabled{opacity:.45;cursor:not-allowed;}

@media(max-width:720px){.doc-history-pager{align-items:stretch;flex-direction:column}.doc-history-pager>div{justify-content:space-between}.doc-history-pager button{min-height:40px}}



/* V27.1 — Auditoría: estado completo en la tabla Hoy */

.today-table {

  /* Evita comprimir la última columna y cortar “Vacaciones”. */

  min-width: 1120px;

}

.today-table .today-status-column {

  width: 142px;

  min-width: 142px;

  padding-left: 12px;

  padding-right: 18px;

}

.today-table .state-pill {

  width: max-content;

  max-width: none;

  white-space: nowrap;

}



/* V29 · Jornadas de hoy: columnas estables y pie de la barra lateral */

.today-table {

  width: 100% !important;

  min-width: 1005px !important;

  table-layout: fixed;

}

.today-table col.today-col-worker { width: 210px; }

.today-table col.today-col-obra { width: 160px; }

.today-table col.today-col-entry,

.today-table col.today-col-exit { width: 95px; }

.today-table col.today-col-timeline { width: 220px; }

.today-table col.today-col-hours { width: 95px; }

.today-table col.today-col-status { width: 130px; }

.today-table th,

.today-table td { box-sizing: border-box; }

/* V70i: bug real reportado con captura -- la columna Obra (160px, con

   table-layout:fixed + white-space:nowrap) no recortaba el texto, así que

   un nombre de obra largo ("OU 540, CELANOVA / BANDE", "MANT ETAPS CANAL

   ISABEL II"...) se salía visualmente encima de la hora de Entrada. */

.today-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }

.today-table th:nth-child(6),

.today-table td:nth-child(6) {

  position: relative;

  z-index: 1;

  background: #fff;

  overflow: visible;

  text-overflow: clip;

  font-variant-numeric: tabular-nums;

}

.today-table thead th:nth-child(6) { background: #f7f9fd; }

.today-table .workday-bar { width: 100%; min-width: 0; max-width: 240px; }

.today-table .person-cell { min-width: 0; }

.today-table .person-cell > div { min-width: 0; overflow: hidden; }

.today-table .person-cell strong,

.today-table .person-cell small { display: block; overflow: hidden; text-overflow: ellipsis; }

.today-table .avatar-mini {

  flex: 0 0 34px;

  width: 34px;

  min-width: 34px;

  height: 34px;

  min-height: 34px;

  box-sizing: border-box;

  aspect-ratio: 1 / 1;

  line-height: 1;

  overflow: hidden;

}



/* V30 · "Hoy": la zona de contenido (derecha) usa todo el ancho disponible junto

   al menú, sin el tope de 1480px de las demás páginas, para que la tabla de

   jornadas no necesite scroll horizontal. El menú lateral NO se toca — sigue

   siempre visible, igual que en el resto del panel. */

body[data-active-section="today"] .content { width: auto !important; max-width: none !important; }



/* V29.1 · Restauración definitiva del menú jerárquico. */

#appSidebar.sidebar .nav .nav-group {

  display: grid !important;

  gap: 4px !important;

  margin: 0 0 9px !important;

}

#appSidebar.sidebar .nav .nav-group.hidden { display: none !important; }

#appSidebar.sidebar .nav .nav-group > .nav-group-label,

#appSidebar.sidebar .nav .nav-group > .nav-group-label.nav-group-toggle {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  width: 100% !important;

  min-height: 26px !important;

  margin: 0 !important;

  padding: 7px 10px 3px !important;

  border: 0 !important;

  border-radius: 8px !important;

  background: transparent !important;

  color: rgba(219,232,255,.76) !important;

  font-size: 9px !important;

  font-weight: 900 !important;

  letter-spacing: .11em !important;

  line-height: 1 !important;

  text-align: left !important;

  text-transform: uppercase !important;

  cursor: pointer !important;

}

#appSidebar.sidebar .nav .nav-group > .nav-group-label.nav-group-toggle:hover {

  background: rgba(255,255,255,.07) !important;

  color: #fff !important;

}

#appSidebar.sidebar .nav .nav-group > .nav-group-label .nav-group-chevron {

  display: inline-block !important;

  font-size: 15px !important;

  line-height: 1 !important;

  letter-spacing: 0 !important;

  transition: transform .15s ease;

}

#appSidebar.sidebar .nav .nav-group.collapsed > .nav-group-label .nav-group-chevron { transform: rotate(-90deg); }

#appSidebar.sidebar .nav .nav-group.collapsed > .nav-item,

#appSidebar.sidebar .nav .nav-group > .nav-item.hidden { display: none !important; }

.worker-form-grid #newWorkerSendInstructions { width: 16px; height: 16px; }

.excel-obras-trigger{white-space:nowrap}

.monthly-resumen-rango-panel{margin:12px 0!important;border:1px solid #bfd2f6!important;box-shadow:0 8px 24px rgba(30,58,138,.08)!important}

/* El .pe-grid "a secas" (sin .admin-config-panel) nunca le daba ancho a sus

   input/select: un <select> nativo se dimensiona por el texto de sus

   opciones, así que con una opción larga (ej. "Partes finales

   (firmados/modificados)") se salía de su columna y se montaba encima de la

   columna siguiente. min-width:0 en el <label> permite que el <select> se

   pueda encoger por debajo de su ancho de contenido en vez de forzar el

   grid a desbordar. */

#monthlyResumenRangoPanel .pe-grid label{min-width:0}

#monthlyResumenRangoPanel .pe-grid input,

#monthlyResumenRangoPanel .pe-grid select{width:100%;box-sizing:border-box;min-height:36px}



/* V41: barra de controles en 2 filas explícitas (Resumen partes / Resumen

   partes firmados). Antes cada .controls-group era un bloque que envolvía

   como unidad segun el ancho disponible (en pantallas anchas, todo cabía en

   una sola línea y quedaba desordenado); ahora la fila 1 (fechas, filtros,

   vista/buscar) y la fila 2 (acciones, exportar) son siempre 2 líneas fijas,

   sea cual sea el ancho de la ventana. Sustituye 3 generaciones de parches

   con !important y grid-column por posición (V9.5/V36.2/V36.5). */

/* align-items:stretch explicito: la clase base ".controls" (usada por otros

   paneles con grid de 4 columnas) trae "align-items:end", y sin este reset

   las filas .toolbar-row se encogen a su contenido en vez de ocupar todo el

   ancho cuando ese contenido es mas estrecho que el hueco disponible (bug

   real, el mismo patron que el de ".pf-controls{align-items:end}" de antes,

   solo que aqui viene de la clase base, no de un parche residual). */

.toolbar-controls{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;padding:16px}

.toolbar-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px}

.toolbar-controls .controls-group{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}

.toolbar-controls .controls-group > label{min-width:0}

.toolbar-row .controls-group-export,

.toolbar-row .controls-group-view{margin-left:auto}

/* flex-basis pequeño a propósito: si aquí pusiéramos un ancho "razonable"

   (ej. 220px) como base, la SUMA de anchos naturales de toda la fila (antes

   de que "Buscar" crezca) se acerca demasiado al ancho disponible y con

   cualquier variación (empresa con más obras, textos más largos…) la fila

   entera "envuelve" de golpe (los segmentados se caen a una segunda línea).

   Con una base mínima, "Buscar" casi no cuenta en esa suma inicial y solo

   ocupa el hueco que sobra una vez que el resto ya está colocado — crece

   hasta tocar los botones sin arriesgar el envolvido de toda la fila.

   min-width evita que se quede ridículamente estrecho si el hueco es muy

   pequeño (ahí ya interviene el ajuste automático de siempre). */

#partesFirmadosSection .pf-search-wide{flex:1 1 40px;min-width:140px}

.toolbar-controls .controls-group button{height:40px;min-height:40px;padding:0 14px;white-space:nowrap;line-height:1}

.toolbar-controls #pfQuitarFiltros,

.toolbar-controls #partesClearFilters{width:auto}

#partesFirmadosSection #pfQuitarFiltros{width:40px;min-width:40px;flex:0 0 40px;padding:0;font-size:20px;color:#1742b7}

@media (max-width:700px){

  .toolbar-controls{gap:10px;padding:12px}

  .toolbar-row{gap:12px}

  .toolbar-controls .controls-group{width:100%}

  .toolbar-controls .controls-group button{flex:1 1 calc(50% - 8px)}

  #partesFirmadosSection #pfQuitarFiltros{flex:0 0 40px}

  /* Pedido del usuario: en móvil, los segmentados (Por obra/Por trabajador,

     HH:MM/Decimal, Resumen/Tabla detallada) quedaban como una píldora

     compacta pegada a la izquierda, sin ocupar la fila entera -- distinto

     de los grupos de botones de arriba (Ausencias abajo/Solo incidencias,

     Quitar filtros/Actualizar), que sí se reparten el ancho completo al

     50%. Mismo patrón aplicado aquí para que toda la barra de controles

     se vea homogénea. min-width:0 anula el min-width:120px/104px de

     escritorio, que si no impediría el reparto exacto al 50%. */

  .segmented-control{width:100%;display:flex}

  .segmented-control button{flex:1;min-width:0}

}





/* V36.7: identidad visible de Enviar resumenes */

.nav-item[data-section="enviarPartes"]::before{content:"📨"!important;opacity:1!important;filter:none!important}

#enviarPartesSection .ep-icon{opacity:1!important;filter:drop-shadow(0 5px 10px rgba(49,91,217,.22));border-radius:50%}

#enviarPartesSection .ep-icon path{opacity:1!important}





/* V36.7 AUDITORIA VISUAL RESPONSIVE */

@media (max-width: 1100px) {

  html, body, #appView, .app, .content { min-width: 0 !important; max-width: 100% !important; }

  #appView { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important; }

  #appView > .content { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }

  .content, .section, .section.active, .panel,

  .monthly-controls, .monthly-panel, .partes-monthly-controls,

  .partes-monthly-panel, .vacation-calendar-panel,

  .form-grid, .controls { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; }

  .monthly-controls, .partes-monthly-controls { width: 100% !important; display: flex !important; flex-wrap: wrap !important; }

  .monthly-panel, .partes-monthly-panel, .vacation-calendar-panel { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

  .form-grid > *, .controls > * { min-width: 0 !important; max-width: 100% !important; }

  .vacation-calendar-panel .form-grid { width: 100% !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; overflow-x: auto !important; }

  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }

}



/* V68 (2): la regla de arriba ("V36.7 AUDITORIA VISUAL RESPONSIVE",

   @media max-width:1100px) reserva 220-260px para el sidebar con

   selector por ID (#appView) -- eso gana SIEMPRE a un selector de clase

   (.app), aunque el de clase tambien lleve !important y este mas abajo

   en el fichero (la especificidad se compara antes que el orden). Como

   el sidebar ya esta oculto/fijo desde 768px (no desde 700px), entre

   769px y 1100px es correcto reservar la columna (el sidebar SIGUE

   visible, solo mas estrecho) -- el hueco real es 701-768px, donde el

   sidebar ya se oculto pero esta regla de 1100px seguia dejando un

   bloque de 220-260px vacio y aplastaba el contenido real a la mitad.

   Se repite aqui con el MISMO selector por ID para igualar la

   especificidad, y al ir despues en el fichero gana el desempate. */

@media (max-width: 768px) {

  #appView { grid-template-columns: minmax(0, 1fr) !important; }

}



@media (max-width: 700px) {

  /* V69: pedido explícito -- este ID con !important ganaba SIEMPRE a

     ".hidden{display:none!important}" (misma importancia, más especificidad

     por ser ID), así que en móvil (<=700px) el "Hoy" de #appView se

     renderizaba igual aunque tuviera la clase .hidden puesta -- se veía la

     pantalla de login normal, pero si bajabas para abajo aparecía el

     dashboard "Hoy" vacío justo debajo, con hueco de scroll de sobra.

     :not(.hidden) conserva la especificidad de ID (para seguir ganando el

     resto de reglas de esta media query) pero deja de pisar el .hidden real. */

  #appView:not(.hidden) { display: block !important; width: 100% !important; }

  .content { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; overflow-x: clip !important; }

  .section, .section.active, .panel, .controls, .form-grid,

  .monthly-controls, .partes-monthly-controls, .monthly-panel,

  .partes-monthly-panel, .vacation-calendar-panel {

    width: 100% !important; min-width: 0 !important; max-width: 100% !important;

    margin-left: 0 !important; margin-right: 0 !important;

  }

  .controls, .form-grid, .incidences-filters,

  .vacation-calendar-filters, .vacation-form-grid {

    grid-template-columns: minmax(0, 1fr) !important;

  }

  .controls > *, .form-grid > *, .incidences-filters > *,

  .vacation-calendar-filters > *, .vacation-form-grid > *,

  input, select, textarea, input[type="file"] {

    width: 100% !important; min-width: 0 !important; max-width: 100% !important;

  }

  button { min-width: 0 !important; max-width: 100% !important; }

  .vac-tabs, .vacation-tabs { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; }

  .vac-tab-btn { width: 100% !important; min-width: 0 !important; }

  .today-chipbar, .conversation-head { flex-wrap: wrap !important; }

  .today-chip { flex: 1 1 auto !important; width: auto !important; white-space: normal !important; }

  .conversation-head button { width: auto !important; min-width: max-content !important; }

  input[type="file"] { overflow-x: auto !important; }

  .table-wrap, .perms-table-scroll { max-width: 100% !important; overflow-x: auto !important; }

}



/* V36.8 PERMISOS AUSENCIAS Y ALINEACION ALTA */

.new-worker-instructions-toggle{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;width:100%!important}.new-worker-instructions-toggle input{flex:0 0 18px!important;width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;margin:0!important;border-radius:4px!important}.new-worker-instructions-toggle span{display:inline!important;margin:0!important}.convenio-scope-field{display:grid;gap:7px;padding:12px;border:1px solid #d8e1f0;border-radius:12px;background:#f8faff;margin:10px 0 14px}.tipo-ausencia-role-field{grid-column:1/-1;border:1px solid #d8e1f0;border-radius:10px;padding:9px 11px;margin:0}.tipo-ausencia-role-field legend{padding:0 6px;font-size:12px;font-weight:800;color:#52627d}.tipo-ausencia-role-grid{display:flex;flex-wrap:wrap;gap:7px 12px}.tipo-ausencia-role-grid label{display:inline-flex!important;align-items:center;gap:5px;font-size:12px;white-space:nowrap}.tipo-ausencia-role-grid input{width:16px!important;height:16px!important;margin:0!important}.tipo-ausencia-row .tipo-ausencia-role-field{width:100%;margin-top:6px}@media(max-width:700px){.tipo-ausencia-role-grid{display:grid;grid-template-columns:1fr 1fr}.new-worker-instructions-toggle{grid-column:1/-1!important}}





/* V37 CALENDARIOS LABORALES */

.calendar-work-panel{display:grid;gap:18px}.calendar-work-tools{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.calendar-work-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.5fr);gap:16px}.calendar-work-card{border:1px solid var(--line,#dbe4f0);border-radius:16px;background:#fff;padding:16px;display:grid;gap:12px;min-width:0}.calendar-work-card h3{margin:0}.calendar-manage-form,.calendar-day-form{display:grid;gap:11px}.calendar-day-form{grid-template-columns:150px minmax(210px,.8fr) minmax(240px,1.2fr);align-items:end}.calendar-day-name{min-width:0}.calendar-inline-checks,.calendar-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.calendar-actions{justify-content:flex-end}.calendar-days-list,.calendar-workers-list{display:grid;gap:7px;max-height:430px;overflow:auto;padding-right:3px}.calendar-day-row,.calendar-worker-row{display:grid;grid-template-columns:120px minmax(130px,.6fr) minmax(180px,1fr) auto;gap:9px;align-items:center;border:1px solid var(--line,#dbe4f0);border-radius:11px;padding:9px 11px;background:#f9fbff}.calendar-day-row.is-convenio{background:#fff8e8}.calendar-day-kind{font-size:12px;font-weight:800;color:#4d5d75}.calendar-day-row .calendar-row-actions{display:flex;gap:6px}.calendar-worker-row{grid-template-columns:minmax(190px,1fr) minmax(220px,1fr)}.calendar-worker-row strong{display:block}.calendar-worker-row small{display:block;color:#6b7890}.calendar-empty{padding:18px;text-align:center;color:#6b7890;border:1px dashed var(--line,#dbe4f0);border-radius:12px}.calendar-workers-card{margin-top:2px}

@media(max-width:900px){.calendar-work-grid{grid-template-columns:1fr}.calendar-day-form{grid-template-columns:1fr 1fr}.calendar-day-name{grid-column:1/-1}.calendar-day-row{grid-template-columns:105px 1fr auto}.calendar-day-row .calendar-day-kind{display:none}}

@media(max-width:600px){.calendar-work-tools,.calendar-work-tools>*{width:100%}.calendar-day-form{grid-template-columns:1fr}.calendar-day-name{grid-column:auto}.calendar-day-row{grid-template-columns:1fr auto}.calendar-day-row>span:first-child{grid-column:1/2}.calendar-day-row .calendar-row-actions{grid-column:2;grid-row:1/3}.calendar-worker-row{grid-template-columns:1fr}.calendar-actions>*{flex:1}.calendar-work-card{padding:13px}}





/* V37.1 AJUSTE DE ANCHO Y FORMULARIO DE CALENDARIOS */

.app > .content{

  width:100%!important;

  max-width:100%!important;

  min-width:0!important;

  box-sizing:border-box!important;

}

#vacationsSection,#vacTabCalendarios,#calendariosLaboralesPanel{min-width:0;max-width:100%;box-sizing:border-box}

.calendar-work-panel .panel-head>*{min-width:0}

.calendar-work-tools{justify-content:flex-end}

.calendar-day-form{grid-template-columns:minmax(135px,.55fr) minmax(190px,.85fr) minmax(200px,1.15fr)}

.calendar-day-form label,.calendar-day-form input,.calendar-day-form select{min-width:0;width:100%}

@media(max-width:1100px){.calendar-work-tools{justify-content:flex-start}}

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

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



/* V37.2 ACCIONES DEL DIA EN UNA FILA PROPIA */

.calendar-day-form>.calendar-actions{grid-column:1/-1;justify-content:flex-end}



/* V37.3 CALENDARIOS EN MOVIL Y CHECKBOXES COMPACTOS */

.calendar-inline-checks .checkbox-label{display:inline-flex!important;align-items:center!important;gap:8px!important;width:auto!important}.calendar-inline-checks input[type="checkbox"]{flex:0 0 18px!important;width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;margin:0!important}

@media(max-width:600px){#vacationsSection>.vac-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}#vacationsSection>.vac-tabs .vac-tab-btn{min-height:42px!important;padding:8px!important;line-height:1.2!important}.calendar-work-panel>.panel-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}.calendar-work-tools{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;align-items:stretch!important}.calendar-work-tools>*{width:100%!important;min-width:0!important}.calendar-inline-checks{display:grid!important;grid-template-columns:1fr!important}.calendar-actions{width:100%!important}}



/* V37.4 CABECERA MOVIL SIN SOLAPAR EL MENU */

@media(max-width:760px){.topbar-copy{padding-left:42px!important;min-width:0!important}.topbar-copy h1,.topbar-copy p{max-width:100%!important;overflow-wrap:anywhere}}





/* V37.5 CALENDARIO LABORAL: VISIBILIDAD, ORIGEN Y FLUJO DE EDICION */

.vacation-calendar button.calendar-holiday{border-color:#f3a7ad!important;background:linear-gradient(180deg,#fff8f8,#fff0f1)!important}.vacation-calendar button.calendar-convention{border-color:#e9c66f!important;background:linear-gradient(180deg,#fffdf4,#fff7dd)!important}.vacation-calendar-event{position:absolute;left:5px;right:5px;bottom:6px;display:grid;gap:1px;text-align:center;line-height:1.08}.vacation-calendar-event strong{font-size:10px!important;font-weight:900!important;color:#9f2632!important}.vacation-calendar-event small{display:block;font-size:9px;font-weight:700;color:#6e3340;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vacation-calendar-event.is-convenio strong{color:#855f00!important}.vacation-calendar-event.is-convenio small{color:#725b20}.vacation-calendar-event em{position:absolute;right:-2px;top:-12px;border-radius:999px;background:#17243d;color:#fff;padding:1px 4px;font-size:8px;font-style:normal}.calendar-popover-row>i{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#ffe1e4;color:#9f2632;font-style:normal;font-weight:900}.calendar-popover-row.is-convenio>i{background:#fff0bd;color:#855f00}.calendar-import-target{display:grid;gap:5px;min-width:250px}.calendar-import-target>span{font-size:11px;font-weight:800;color:#5b6b84}.calendar-import-target select{min-height:40px}.convenio-scope-field{margin:0}.calendar-action-hint{margin:0;min-height:18px;font-size:11px;color:#6b7890}.calendar-day-row.is-festivo{background:#fff6f7;border-color:#f3ccd0}.calendar-day-row.is-festivo .calendar-day-kind{color:#9f2632}.calendar-day-row.is-convenio .calendar-day-kind{color:#855f00}.calendar-day-kind{overflow-wrap:anywhere}.calendar-work-tools .import-control{min-height:40px}.calendar-work-tools .secondary-button{min-height:40px}

@media(max-width:600px){.calendar-work-tools{grid-template-columns:1fr!important}.calendar-import-target{min-width:0}.vacation-calendar-event small{display:none}.calendar-actions{display:grid!important;grid-template-columns:1fr!important}.calendar-actions>*{width:100%!important}}





/* V37.6 SELECTOR PRINCIPAL Y ANCHO DE IMPORTACION */

.calendar-work-panel>.panel-head{display:grid!important;grid-template-columns:minmax(0,1fr) 360px!important;gap:24px!important;align-items:end!important}.calendar-work-tools{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:360px!important;justify-self:end!important;gap:8px!important}.calendar-import-target{grid-column:1/-1!important;width:100%!important;min-width:0!important}.calendar-import-target select{width:100%!important}.calendar-work-tools .secondary-button,.calendar-work-tools .import-control{width:100%!important;min-width:0!important}.calendar-active-selector{display:grid;grid-template-columns:minmax(280px,520px) minmax(260px,1fr);gap:18px;align-items:end;padding:14px 16px;border:1px solid #cfdcf0;border-radius:14px;background:linear-gradient(135deg,#f7faff,#f2f6ff)}.calendar-active-selector label{display:grid;gap:6px}.calendar-active-selector label>span{font-size:12px;font-weight:900;color:#304361}.calendar-active-selector select{width:100%;min-height:44px;border-color:#9eb7e8;background:#fff;font-weight:800}.calendar-active-selector small{align-self:center;color:#60708a;line-height:1.45}.calendar-work-card>#calendarDaysContext{margin:-6px 0 0}.calendar-work-card h3{overflow-wrap:anywhere}

@media(max-width:1100px){.calendar-work-panel>.panel-head{grid-template-columns:1fr!important}.calendar-work-tools{width:min(100%,520px)!important;justify-self:start!important}.calendar-active-selector{grid-template-columns:1fr}}

@media(max-width:600px){.calendar-work-tools{grid-template-columns:1fr!important;width:100%!important}.calendar-active-selector{padding:12px;gap:8px}.calendar-active-selector small{font-size:11px}}





/* V37.9 CHECKBOXES UNIFORMES */

input[type="checkbox"] {

  -webkit-appearance: checkbox !important;

  appearance: auto !important;

  box-sizing: border-box !important;

  flex: 0 0 18px !important;

  width: 18px !important;

  min-width: 18px !important;

  max-width: 18px !important;

  height: 18px !important;

  min-height: 18px !important;

  max-height: 18px !important;

  margin: 0 !important;

  padding: 0 !important;

  border-radius: 3px !important;

  box-shadow: none !important;

  accent-color: #315bd9 !important;

  vertical-align: middle !important;

  cursor: pointer;

}

input[type="checkbox"]:disabled { cursor: default; }

.checkbox-label, .chk, .copy-item,

label:has(> input[type="checkbox"]) {

  align-items: center;

}



/* V37.10 AUSENCIAS EN PARTES */

.partes-absence-cell{background:#f3e8ff!important;color:#6b21a8!important;font-weight:900!important;white-space:nowrap}.pfcell-ausencia{background:#f3e8ff!important;color:#6b21a8!important;border-color:#d8b4fe!important}

/* V51: aviso de incidencia (fichó pero no hay parte puesto ese día) */

.incidencia-cell{background:#fef2f2!important;color:#991b1b!important;border-color:#fca5a5!important}

.incidencia-badge{display:inline-block;background:#dc2626;color:#fff;font-weight:800;font-size:10px;line-height:1;border-radius:50%;width:15px;height:15px;text-align:center;margin-right:3px;vertical-align:middle}

.incidencias-toggle-button.active{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important}

/* V71: edición "tipo excel" de Resumen partes, celda a celda */

.parte-cell-editable{cursor:pointer;position:relative}

.parte-cell-editable:hover{outline:2px dashed #0891b2;outline-offset:-2px}

.parte-cell-pending{background:#fff7ed!important;color:#9a3412!important;border-color:#fdba74!important;font-weight:800}

.parte-cell-input{width:100%;min-width:56px;box-sizing:border-box;border:1px solid #0891b2;border-radius:4px;padding:2px 4px;font-size:inherit;font-family:inherit;text-align:center}

.parte-cambios-barra{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;background:#172033;color:#fff;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}

.parte-cambios-texto{font-size:13px;font-weight:700}
.pf-edit-button{padding:4px 8px;font-size:11px}
.pf-edit-warning{margin-right:auto;color:var(--fg-3);font-size:11px;max-width:420px;line-height:1.35}
/* V72: aviso persistente de datos desactualizados (no es el toast de 5s

   de .notice -- este se queda mientras el problema no se resuelva). */

.stale-data-banner{background:#92400e;border-left:4px solid #fbbf24;color:#fff;padding:10px 14px;border-radius:8px;display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;margin-bottom:12px}

.stale-data-banner a{color:#fff;text-decoration:underline}

.stale-data-banner-icono{flex-shrink:0}



/* V38 core visual fixes */

.absence-conflict{display:block;margin-top:4px;color:#b45309;font-size:11px;font-weight:700;white-space:normal}.day-row-absence-conflict{box-shadow:inset 4px 0 #f59e0b}

/* V42: el botón "Permisos de visualización" que abre la ventanita — sustituye

   al <details> de antes (reglas .tipo-ausencia-permissions*, ya no se usan). */

.tipo-ausencia-permisos-btn{white-space:nowrap}

.absence-order-button{white-space:nowrap}.activity-item.warning{border-left-color:#f59e0b;background:#fffbeb}



/* V41: mini-empresa de subcontrata dentro de la seccion Subcontratas */

.subempresa-panel{margin-bottom:16px}

.subempresa-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px}

.subempresa-select-wrap{display:flex;flex-direction:column;gap:6px;min-width:260px}

.subempresa-select-wrap span{font-size:12px;color:var(--fg-3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}

.subempresa-select-wrap select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px}

.subempresa-tabs{display:flex;gap:6px;margin:16px 0 12px;border-bottom:1px solid var(--line)}

.subempresa-tab{padding:9px 14px;border:0;border-bottom:2px solid transparent;background:transparent;font-weight:700;color:var(--fg-3);cursor:pointer}

.subempresa-tab.active{color:var(--fg-1);border-bottom-color:#2563eb}

.subempresa-tabpanel.hidden{display:none}

.subempresa-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}

.subempresa-kpis .metric{min-width:120px}

.subempresa-trab-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}

.subempresa-trab-head input[type="search"]{flex:1;min-width:220px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}

.subempresa-trab-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:#f8fafc}

.subempresa-trab-form > label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--fg-3);font-weight:700;text-transform:uppercase}

.subempresa-trab-form input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-weight:400;text-transform:none;font-size:14px}

.subempresa-obras-list{max-height:160px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px;background:#fff}

.subempresa-worker-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:#fff}

.subempresa-worker-row strong{display:block}

.subempresa-worker-row small{color:var(--fg-3)}

.subempresa-worker-actions{display:flex;gap:6px}

.subempresa-grupo-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 6px;padding-bottom:4px;border-bottom:2px solid var(--line);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)}

.subempresa-grupo-cabecera:first-child{margin-top:0}

.subempresa-grupo-cabecera span{background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:2px 9px;font-weight:800}

/* V50: Hoy de Subcontratas es ahora la MISMA tabla que el Hoy general

   (.today-table, reutilizada tal cual) -- ver renderSubEmpresaHoyTable(). */

#subEmpresaHoyLista .today-table-scroll{margin-top:4px}

.sub-resumen-tabla{width:100%;border-collapse:collapse;font-size:13px}

.sub-resumen-tabla thead th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-3);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}

.sub-resumen-tabla tbody td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}

.sub-resumen-tabla tbody tr:hover{background:var(--surface-soft,#f8fafc)}

.sub-resumen-tabla .btn-sm{padding:4px 10px;height:auto;font-size:12px}

.sub-resumen-agrupado tbody tr td:first-child{background:var(--surface-soft,#f8fafc)}

/* V50: la rejilla de días (Resumen partes de subcontrata) es más ancha que la

   pantalla -- necesita una barra de scroll horizontal propia y que Cód./

   Trabajador/Obra no partan la palabra en dos líneas para poder leerlos. */

#subListaAgrupado{overflow-x:auto;padding-bottom:6px}

.sub-resumen-grid{width:max-content;min-width:100%}

.sub-resumen-grid td,.sub-resumen-grid th{white-space:nowrap}

.sub-resumen-grid td:nth-child(1),.sub-resumen-grid th:nth-child(1){width:110px;min-width:110px}

.sub-resumen-grid td:nth-child(2),.sub-resumen-grid th:nth-child(2){width:100px;min-width:100px}

.sub-resumen-grid td:nth-child(3),.sub-resumen-grid th:nth-child(3){width:130px;min-width:130px}

.sub-resumen-grid td:nth-child(4),.sub-resumen-grid th:nth-child(4){width:150px;min-width:150px}

.sub-resumen-grid td:nth-child(1),.sub-resumen-grid th:nth-child(1),

.sub-resumen-grid td:nth-child(2),.sub-resumen-grid th:nth-child(2),

.sub-resumen-grid td:nth-child(3),.sub-resumen-grid th:nth-child(3),

.sub-resumen-grid td:nth-child(4),.sub-resumen-grid th:nth-child(4){position:sticky;background:#fff;z-index:1}

.sub-resumen-grid td:nth-child(1),.sub-resumen-grid th:nth-child(1){left:0}

.sub-resumen-grid td:nth-child(2),.sub-resumen-grid th:nth-child(2){left:110px}

.sub-resumen-grid td:nth-child(3),.sub-resumen-grid th:nth-child(3){left:210px}

.sub-resumen-grid td:nth-child(4),.sub-resumen-grid th:nth-child(4){left:340px;box-shadow:2px 0 4px rgba(0,0,0,.06)}

.sub-resumen-grid thead th{background:var(--surface-soft,#f8fafc)}

.sub-resumen-grid .day-col{min-width:52px;text-align:right}

.sub-listado-barra{display:flex;align-items:center;gap:12px;margin:10px 0;padding:8px 12px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:13px}

.sub-listado-barra.hidden{display:none}

.subempresa-worker-historial{flex-basis:100%;border-top:1px dashed var(--line);margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:6px}

.sub-historial-row{display:flex;gap:14px;font-size:13px;color:var(--fg-2)}



/* V41: modo edicion LIBRE tipo mapa (Resumen partes / Resumen partes

   firmados / Resumen mensual / panel Excel de resumen por rango), solo para

   superadmin. No es una lista reordenable: cada elemento se arrastra a

   cualquier punto X/Y de su bloque y se redimensiona tirando de la esquina

   inferior derecha. En vez de que cada ajuste dependa de que acertemos con

   CSS a partir de capturas, el propio superadmin lo coloca donde quiera. */

.layout-edit-btn{padding:0 12px}

.pe-grid-head{display:flex;align-items:center;justify-content:space-between;gap:10px}

.pe-grid-head h2{margin:0}

.toolbar-layout-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;padding:9px 14px;border:1px dashed #7c93c9;border-radius:var(--r-sm);background:#eef3ff;font-size:13px;color:#1e3a8a}

.toolbar-layout-bar.hidden{display:none}

.toolbar-layout-bar span{font-weight:600}

.layout-editing{background-image:linear-gradient(#dbe4f7 1px,transparent 1px),linear-gradient(90deg,#dbe4f7 1px,transparent 1px);background-size:24px 24px;border-radius:var(--r-sm)}

.layout-editing [data-sort-key]{box-sizing:border-box;border:1px dashed #7c93c9;border-radius:8px;padding:2px;background:rgba(37,99,235,.06);cursor:move;touch-action:none;overflow:auto}

.layout-editing [data-sort-key].tl-dragging{opacity:.7;z-index:5;box-shadow:0 6px 16px rgba(23,66,183,.25)}

.layout-editing [data-sort-key].tl-resizing{z-index:5}

/* El handle solo existe en el DOM mientras se edita (se crea al entrar en

   modo edicion y se borra al salir, ver exitCanvasEditMode) en vez de

   ocultarlo por CSS, para no depender de ganar la guerra de especificidad

   contra reglas genericas como ".pe-grid label span" que tambien tocan

   cualquier <span> dentro de un label del panel Excel por obras. */

.tl-resize-handle{display:block!important;position:absolute!important;right:0;bottom:0;width:14px;height:14px;background:#1742b7;border-radius:5px 0 8px 0;cursor:nwse-resize;touch-action:none}

.sub-historial-row span:first-child{min-width:90px;font-weight:700}



/* V54: enlace de conexiones alineado como el resto del menu lateral */

.nav-item.nav-link-connection { display:flex; align-items:center; gap:8px; color:rgba(245,249,255,0.84); text-decoration:none; line-height:1.2; white-space:normal; }

.nav-item.nav-link-connection .nav-icon { display:inline-flex; flex:0 0 18px; width:18px; align-items:center; justify-content:center; line-height:1; }

.nav-item.nav-link-connection:hover, .nav-item.nav-link-connection:focus-visible { color:#fff; text-decoration:none; }



/* V54: los enlaces del menu deben comportarse igual que los botones */

.nav-item { display:flex; align-items:center; text-decoration:none; }

.nav-item:visited { color:rgba(245,249,255,0.84); text-decoration:none; }

.nav-item.active:visited, .nav-item:hover:visited, .nav-item:focus-visible:visited { color:#fff; text-decoration:none; }



.nav-item[data-section='connections']{white-space:nowrap;line-height:1.2;font-size:13px;padding-left:20px;}

.nav-item[data-section='connections'] .nav-icon{flex:0 0 18px;width:18px;text-align:center;}









/* V54: correccion de iconos tras reparacion UTF-8.

   Los iconos HTML se conservan; se desactivan los pseudo-iconos corruptos. */

.nav-item::before {

  content: none !important;

  display: none !important;

}

.notice.notice-success::before,

.notice.notice-error::before,

.notice.notice-warning::before,

.notice.notice-info::before {

  content: none !important;

  display: none !important;

}

/* V54: correccion de iconos tras reparacion UTF-8.

   Los iconos HTML se conservan; se desactivan los pseudo-iconos corruptos. */

.nav-item::before {

  content: none !important;

  display: none !important;

}

.notice.notice-success::before,

.notice.notice-error::before,

.notice.notice-warning::before,

.notice.notice-info::before {

  content: none !important;

  display: none !important;

}



/* Iconos del menu: escapes CSS estables para no depender de la codificacion del archivo. */

.nav-item[data-section="today"]::before { content: "\1F3E0" !important; }

.nav-item[data-section="dashboard"]::before { content: "\1F4CB" !important; }

.nav-item[data-section="stats"]::before { content: "\1F4CA" !important; }

.nav-item[data-section="incidences"]::before { content: "\26A0" !important; }

.nav-item[data-section="monthly"]::before { content: "\1F4C5" !important; }

.nav-item[data-section="vacations"]::before { content: "\1F334" !important; }

.nav-item[data-section="workers"]::before { content: "\1F477" !important; }

.nav-item[data-section="works"]::before { content: "\1F3D7" !important; }

.nav-item[data-section="users"]::before { content: "\1F465" !important; }

.nav-item[data-section="conversations"]::before { content: "\1F4AC" !important; }

.nav-item[data-section="partes"]::before { content: "\1F4CB" !important; }

.nav-item[data-section="documents"]::before { content: "\1F4C4" !important; }

.nav-item[data-section="partesFirmados"]::before { content: "\2705" !important; }

.nav-item[data-section="subcontratas"]::before { content: "\1F517" !important; }

.nav-item[data-section="documentosFirma"]::before { content: "\1F4E8" !important; }

.nav-item[data-section="nubeConexiones"]::before { content: "\2601" !important; }

.nav-item[data-section="parteConfig"]::before { content: "\2699" !important; }

.nav-item[data-section="partesGenerados"]::before { content: "\1F4CA" !important; }

.nav-item[data-section="enviarPartes"]::before { content: "\1F4E8" !important; }

.nav-item::before {

  display: inline-block !important;

  width: 1.35em !important;

  margin-right: .35em !important;

  text-align: center !important;

}

/* V54: Conexiones usa icono HTML propio; evita doble hueco del pseudoicono. */

.nav-item[data-section="connections"] {

  display: flex !important;

  align-items: center !important;

  gap: 0.35em !important;

  line-height: 1.2 !important;

  white-space: nowrap !important;

}

.nav-item[data-section="connections"]::before {

  content: none !important;

  display: none !important;

  width: 0 !important;

  margin: 0 !important;

}

.nav-item[data-section="connections"] .nav-icon {

  display: inline-flex !important;

  flex: 0 0 1.35em !important;

  width: 1.35em !important;

  height: 1.35em !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

  margin: 0 !important;

}

/* V54: iconos faltantes y exclusion de botones con icono HTML propio. */

.nav-item[data-section="userGenerator"]::before { content: "\2795" !important; }

.nav-item[data-section="difusionEvo"]::before { content: "\1F4E2" !important; }

.nav-item[data-section="difusionMeta"]::before { content: "\1F4E2" !important; }

.nav-item[data-section="mapaFichajes"]::before,

.nav-item[data-section="connections"]::before,

.nav-item[data-section="documentosEnviados"]::before {

  content: none !important;

  display: none !important;

  width: 0 !important;

  margin: 0 !important;

}

.nav-item[data-section="mapaFichajes"] .nav-icon,

.nav-item[data-section="connections"] .nav-icon,

.nav-item[data-section="documentosEnviados"] .nav-icon {

  display: inline-flex !important;

  flex: 0 0 1.35em !important;

  width: 1.35em !important;

  height: 1.35em !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

  margin: 0 !important;

}

/* V54: iconos faltantes y exclusion de botones con icono HTML propio. */

/* V54: botones HTML alineados. */

.nav-item[data-section="userGenerator"]::before { content: "\2795" !important; }

.nav-item[data-section="difusionEvo"]::before { content: "\1F4E2" !important; }

.nav-item[data-section="difusionMeta"]::before { content: "\1F4E2" !important; }

.nav-item[data-section="mapaFichajes"]::before,

.nav-item[data-section="connections"]::before,

.nav-item[data-section="documentosEnviados"]::before {

  content: none !important;

  display: none !important;

  width: 0 !important;

  margin: 0 !important;

}

.nav-item[data-section="mapaFichajes"] .nav-icon,

.nav-item[data-section="connections"] .nav-icon,

.nav-item[data-section="documentosEnviados"] .nav-icon {

  display: inline-flex !important;

  flex: 0 0 1.35em !important;

  width: 1.35em !important;

  height: 1.35em !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

  margin: 0 !important;

}

.nav-item[data-section="mapaFichajes"],

.nav-item[data-section="connections"],

.nav-item[data-section="documentosEnviados"] {

  padding-left: 16px !important;

}

/* V54: conservar el icono SVG de WhatsApp en Difusion. */

.nav-item[data-section="difusionEvo"]::before {

  content: "" !important;

  display: block !important;

  width: 18px !important;

  height: 18px !important;

  margin-right: .35em !important;

}

/* V68: pedido explícito -- "Ver ajustes", "Plantillas" y "Enviar documento"

   (grupos "Ajustes de empresa"/"Documentos a enviar") se quedaron sin icono

   al crearlos, a diferencia del resto del menú. */

.nav-item[data-section="ajustesEmpresa"]::before { content: "\1F6E0" !important; }

.nav-item[data-section="plantillasEnviar"]::before { content: "\1F5C2" !important; }

.nav-item[data-section="enviarDocumentoEnviar"]::before { content: "\1F5A8" !important; }

/* Selector masivo de trabajadores en Enviar resúmenes */

.ep-select-all { display: flex; align-items: center; gap: 7px; margin: 2px 0 5px; color: var(--fg-2); font-size: 12px; font-weight: 600; }

.ep-select-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary, #315eea); }



/* V66: Documentos a enviar -- Categorías y Firma de empresa */

/* V67 (4): filas dentro de una unica tarjeta, mismo lenguaje que .pe-grid-rows */

.categorias-enviar-list { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.categoria-enviar-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }

.categoria-enviar-row:last-child { border-bottom: 0; }

.categoria-enviar-row input { flex: 1; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; }

.firma-empresa-imagen-wrap { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed var(--border, #d8dee9); border-radius: 10px; padding: 12px; background: var(--bg-2, #f7f8fa); }

.firma-empresa-preview { max-width: 320px; max-height: 160px; object-fit: contain; }

.firma-empresa-preview.hidden { display: none; }

.enviar-doc-checklist { display: flex; flex-direction: column; gap: 4px; }

.enviar-doc-checklist-scroll { max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #d8dee9); border-radius: 8px; padding: 8px; margin-top: 6px; }

/* V72: rediseño pedido explícito -- "no me convence como has puesto la

   parte de envío sobre todo lo de la nube", que se pareciera más a "Envío

   de documentación". Tarjeta clara con una fila por proveedor (checkbox +

   botón + carpeta elegida juntos, en vez de una frase combinando los dos

   proveedores al final). */

.enviar-doc-nube-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-top:10px;display:flex;flex-direction:column;gap:10px}

.enviar-doc-nube-titulo{margin:0;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}

.enviar-doc-nube-titulo small{text-transform:none;font-weight:600;letter-spacing:0;color:var(--fg-3);opacity:.8}

.enviar-doc-nube-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:8px 0;border-top:1px solid var(--line)}

.enviar-doc-nube-row:first-of-type{border-top:0;padding-top:0}

.enviar-doc-nube-row .checkbox-label{font-weight:700}

.enviar-doc-nube-carpeta{font-size:12.5px;color:var(--fg-3);flex-basis:100%}

.enviar-doc-nube-carpeta b{color:var(--fg-1);font-weight:700}

.enviar-doc-lista-card { border: 1px solid var(--border, #d8dee9); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }

.enviar-doc-lista-card h4 { margin: 0 0 6px; font-size: 13px; }

.enviar-doc-resultado-ok { color: #1a8f4c; }

.enviar-doc-resultado-error { color: #c0392b; }
/* V101: pedido explicito -- el aviso de "se va a enviar" y el resultado ya
   no saltan desde arriba (confirm() nativo + notice global): se quedan como
   un globo de mensaje dentro de la propia pagina, con una barra de progreso
   azul abajo mientras se envia (misma idea que el "enviando..." de
   WhatsApp), que se vuelve una linea azul solida al terminar. */
.doc-envio-bocata { position: relative; margin-top: 12px; max-width: 560px; padding: 14px 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(15,23,42,.07); }
.doc-envio-bocata::before { content: ""; position: absolute; top: -7px; left: 26px; width: 13px; height: 13px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.doc-envio-bocata-texto { font-size: 13.5px; color: var(--fg-1); }
.doc-envio-bocata-acciones { display: flex; gap: 8px; margin-top: 10px; }
.doc-envio-bocata-barra { margin-top: 10px; height: 4px; border-radius: 999px; overflow: hidden; background: #e4eaf5; }
.doc-envio-bocata-barra.hidden { display: none; }
.doc-envio-bocata-barra > span { display: block; position: relative; width: 35%; height: 100%; border-radius: inherit; background: var(--blue); }
.doc-envio-bocata-barra.enviando > span { animation: docEnvioBocataBarra 1.1s ease-in-out infinite; }
.doc-envio-bocata-barra.completo > span { width: 100%; left: 0; animation: none; }
.doc-envio-bocata-barra.error > span { width: 100%; left: 0; animation: none; background: #c0392b; }
@keyframes docEnvioBocataBarra { 0% { left: -35%; } 100% { left: 100%; } }
/* V119: destino de documento alineado y controles de orden opcional. */
.enviar-doc-destino-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:12px}
.enviar-doc-destino-grid>label{min-width:0;display:flex;flex-direction:column;gap:6px}
.enviar-doc-destino-grid>label>select,.enviar-doc-destino-grid>label>input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.enviar-doc-destino-grid .checkbox-label{align-self:end;min-height:42px;justify-content:flex-start}
.enviar-doc-orden-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f8fbff}
.enviar-doc-orden-wrap>div:first-child{display:grid;gap:3px}.enviar-doc-orden-wrap small{color:var(--fg-3)}
.enviar-doc-orden-tools{margin:0;align-items:center}.enviar-doc-orden-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.48)}
.enviar-doc-orden-modal.hidden{display:none}.enviar-doc-orden-dialog{width:min(460px,100%);padding:20px;border-radius:16px;background:#fff;box-shadow:0 18px 55px rgba(15,23,42,.25)}
.enviar-doc-orden-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.enviar-doc-orden-head h3{margin:0}.enviar-doc-orden-dialog label{display:grid;gap:6px;margin-top:14px}.enviar-doc-orden-dialog input{width:100%;box-sizing:border-box}.enviar-doc-orden-dialog-actions{justify-content:flex-end;margin-top:16px}
@media(max-width:1050px){.enviar-doc-destino-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.enviar-doc-destino-grid{grid-template-columns:1fr}.enviar-doc-orden-wrap{align-items:stretch}.enviar-doc-orden-tools{justify-content:space-between}}

.permisos-persona-lista { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }

.permisos-persona-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--border, #eef0f4); }

.permisos-persona-fila span { font-size: 13px; }

.permisos-persona-fila select { min-width: 190px; }

.plantillas-enviar-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.plantilla-enviar-row { display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.25fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border, #d8dee9); border-radius: 10px; }
.plantilla-enviar-nombre, .plantilla-enviar-contenido { min-width: 0; text-align: left; }
.plantilla-enviar-nombre strong { display: block; overflow-wrap: anywhere; }
.plantilla-enviar-contenido { color: var(--fg-2, #64748b); }
/* V128: the field editor has no reorder column. */
.plantilla-enviar-row[data-campo-fila] { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) auto; }
.plantilla-enviar-row > .toolbar { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
@media (max-width: 760px) {
  .plantilla-enviar-row { grid-template-columns: auto minmax(0, 1fr); }
  .plantilla-enviar-row > .plantilla-enviar-orden { grid-column: 1; grid-row: 1; align-self: start; }
  .plantilla-enviar-row > .plantilla-enviar-nombre { grid-column: 2; grid-row: 1; }
  .plantilla-enviar-row > .plantilla-enviar-contenido { grid-column: 1 / -1; grid-row: 2; }
  .plantilla-enviar-row > .toolbar { grid-column: 1 / -1; grid-row: 3; }
  .plantilla-enviar-row[data-campo-fila] { grid-template-columns: minmax(0, 1fr); }
  .plantilla-enviar-row[data-campo-fila] > .plantilla-enviar-nombre { grid-column: 1; }
}
/* V103: agrupacion de plantillas por categoria ("tipo") en desplegables +
   orden manual dentro de cada una. */
.pe-categoria { border: 1px solid var(--border, #d8dee9); border-radius: 12px; padding: 4px 12px 10px; margin-bottom: 10px; }
.pe-categoria > summary { cursor: pointer; padding: 10px 2px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 6px; }
.pe-categoria > summary::-webkit-details-marker { display: none; }
.pe-categoria > summary::before { content: '▸'; display: inline-block; transition: transform .15s ease; color: var(--fg-3, #64748b); }
.pe-categoria[open] > summary::before { transform: rotate(90deg); }
.pe-categoria-body { display: flex; flex-direction: column; gap: 8px; }
.plantilla-enviar-orden { display: flex; flex-direction: row; align-items: center; gap: 2px; flex-wrap: nowrap; }
.plantilla-enviar-orden .icon-btn { width: 24px; height: 22px; font-size: 11px; padding: 0; line-height: 1; }
.plantilla-enviar-orden .icon-btn:disabled { opacity: .3; cursor: default; }

.plantilla-enviar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.plantilla-enviar-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--bg-2, #f0f2f5); font-size: 12.5px; font-family: monospace; border: none; cursor: pointer; color: inherit; }
.plantilla-enviar-chip:hover { filter: brightness(0.95); }
.plantilla-enviar-chip small { font-family: inherit; opacity: .75; }
.plantilla-enviar-chip-ok { background: rgba(26,143,76,.12); color: #1a8f4c; }
.plantilla-enviar-chip-pendiente { background: rgba(192,57,43,.12); color: #c0392b; }
.documento-variable-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border, #d8dee9); border-radius: 10px; }
.documento-variable-row-info { display: flex; flex-direction: column; gap: 2px; }
.documento-variable-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--bg-2, #f0f2f5); font-size: 11.5px; margin-right: 6px; }
.documento-variable-tag-obligatoria { background: rgba(192,57,43,.12); color: #c0392b; }

.plantilla-enviar-lista-bloque { border: 1px solid var(--border, #d8dee9); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
/* V101: pedido explicito -- "pegar varias opciones de golpe" en vez de
   añadirlas una a una. */
.plantilla-enviar-lista-bulk { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--border, #d8dee9); border-radius: 8px; background: var(--bg-2, #f7f9fb); }
.plantilla-enviar-lista-bulk textarea { width: 100%; min-height: 100px; font-family: monospace; font-size: 13px; padding: 8px; border-radius: 8px; border: 1px solid var(--border, #d8dee9); resize: vertical; }

.zona-firma-editor { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.zona-firma-paginas { display: flex; gap: 8px; align-items: center; }

.zona-firma-paginas select, .zona-firma-paginas input { max-width: 220px; }

.zona-firma-canvas { position: relative; width: 260px; aspect-ratio: 595 / 842; background: #fff; border: 1px solid var(--border, #d8dee9); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: crosshair; user-select: none; }

.zona-firma-pdf { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }

.zona-firma-pdf.hidden { display: none; }

.zona-firma-rect { position: absolute; border: 1.5px dashed #315eea; background: rgba(49,94,234,.15); pointer-events: none; }

.zona-firma-rect.hidden { display: none; }

.zona-firma-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-size: 12px; color: var(--fg-2, #8a94a6); pointer-events: none; }

.zona-firma-hint.hidden { display: none; }

/* V69: capa transparente que de verdad recibe el arrastre (el <embed> del

   PDF puede quedarse con el clic aunque tenga pointer-events:none). */

.zona-firma-capa { position: absolute; inset: 0; cursor: crosshair; }

.zona-firma-acciones { display: flex; gap: 8px; }

/* V115: filas de documentos personalizados: el nombre/estado queda a la
   izquierda y el selector de archivo siempre visible a la derecha. */
.enviar-doc-personalizado-fila { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border:1px solid #dbe5f2; border-radius:12px; background:#fbfdff; }
.enviar-doc-personalizado-info { min-width:0; display:grid; gap:3px; }
.enviar-doc-personalizado-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.enviar-doc-personalizado-info span { color:#64748b; font-size:12px; }
.enviar-doc-personalizado-file { flex:0 0 auto; display:inline-flex; align-items:center; cursor:pointer; white-space:nowrap; }
.enviar-doc-personalizado-file input { display:none; }
@media(max-width:680px){ .enviar-doc-personalizado-fila { align-items:stretch; flex-direction:column; } .enviar-doc-personalizado-file { justify-content:center; } }

/* V69: pedido explícito -- "Ampliar" mueve este mismo canvas dentro del

   modal grande; con esta clase pasa de 260px a un tamaño cómodo para

   marcar la zona con precisión. */

.zona-firma-canvas-ampliada { width: min(70vw, 640px) !important; }



/* V80: administración visible de credenciales QR/NFC. */

.terminales-panel { display: grid; gap: 16px; }

.terminales-heading { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }

.terminales-heading h2 { margin: 0 0 6px; }

.terminales-badge { align-self: flex-start; border: 1px solid #cdd9f5; background: #f1f5ff; color: #3554a9; border-radius: 999px; padding: 7px 10px; font-size: .8rem; font-weight: 800; white-space: nowrap; }

.terminales-controls { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 12px 16px; align-items: end; }

.terminales-controls label { display: grid; gap: 6px; color: var(--muted, #64748b); font-size: .86rem; font-weight: 700; }

.terminales-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.terminales-status { border: 1px solid #dbe5f3; background: #f8fbff; border-radius: 10px; padding: 12px 14px; color: #34445e; }

.terminales-status[data-kind="success"] { border-color: #bde6d3; background: #f1fbf6; color: #1f6b4e; }

.terminales-status[data-kind="warning"] { border-color: #f3dba2; background: #fff9ec; color: #7b591a; }

.terminales-status[data-kind="error"] { border-color: #f2c1c1; background: #fff5f5; color: #9c3434; }

.terminales-block { width: max-content; max-width: 100%; }

.terminales-qr { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 16px; border: 1px solid #cdd9f5; border-radius: 12px; background: #fff; align-items: center; }

.terminales-qr img { display: block; background: #fff; border: 1px solid #e0e7f2; border-radius: 8px; max-width: 100%; height: auto; }

.terminales-qr-copy { display: grid; gap: 8px; justify-items: start; }

.terminales-qr-copy p { margin: 0; color: var(--muted, #64748b); }

.terminales-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.terminales-device-qr { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; margin: 10px 0; }

.terminales-device-qr img { display: block; background: #fff; border: 1px solid #e0e7f2; border-radius: 8px; max-width: 100%; height: auto; }

.terminales-device-qr small { color: var(--muted, #64748b); }

.terminales-credenciales-list { overflow-x: auto; }

.terminales-cred-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.terminales-cred-table th, .terminales-cred-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5ebf5; }

.terminales-cred-estado { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.terminales-cred-estado.is-active { background: #f1fbf6; color: #1f6b4e; }

.terminales-cred-estado.is-blocked { background: #fff5f5; color: #9c3434; }

.terminales-cred-estado.is-none { background: #f2f4f8; color: #64748b; }

.terminales-info-grid article { border: 1px solid #e1e8f3; border-radius: 10px; padding: 13px; background: #fbfdff; }

.terminales-info-grid h3 { margin: 0 0 7px; font-size: .95rem; }

.terminales-info-grid p { margin: 0; color: var(--muted, #64748b); font-size: .88rem; line-height: 1.45; }

@media (max-width: 760px) { .terminales-heading, .terminales-controls { grid-template-columns: 1fr; display: grid; } .terminales-actions { justify-content: stretch; } .terminales-actions button { flex: 1 1 160px; } .terminales-qr { grid-template-columns: 1fr; } .terminales-info-grid { grid-template-columns: 1fr; } }





/* V80: todos los accesos del lateral reservan exactamente el mismo icono y sangría. */

.nav-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; padding-left: 14px !important; text-align: left !important; }

.nav-item::before { position: static !important; display: inline-flex !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }

.nav-item .nav-icon { display: none !important; }

.nav-item[data-section="mapaFichajes"]::before { content: "\1F4CD" !important; }

.nav-item[data-section="connections"]::before { content: "\1F517" !important; }

.nav-item[data-section="documentosEnviados"]::before { content: "\1F4C4" !important; }

.nav-item[data-section="avisoFinJornada"]::before { content: "\23F0" !important; }

.nav-item[data-section="turnos"]::before { content: "\1F550" !important; }

.nav-item[data-section="calendarioTurnos"]::before { content: "\1F5D3" !important; }

.nav-item[data-section="terminales"]::before { content: "\1F4F1" !important; }

.nav-item[data-section="connections"], .nav-item[data-section="mapaFichajes"], .nav-item[data-section="documentosEnviados"] { padding-left: 14px !important; }



/* V80: calendario de turnos por persona y fecha. */

.calendario-turnos-panel, .calendario-turnos-editor, .calendario-turnos-batch { display: grid; gap: 16px; margin-bottom: 16px; }

.calendario-turnos-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }

.calendario-turnos-head h2, .calendario-turnos-editor h2, .calendario-turnos-batch h2 { margin: 0 0 5px; }

.calendario-mes-control { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.calendario-mes-control strong { min-width: 155px; text-align: center; text-transform: capitalize; }

.calendario-mes-control button { height: 36px; min-width: 36px; }

.calendario-turnos-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; color: var(--fg-3); font-size: 12px; font-weight: 700; }

.calendario-turnos-legend span { display: inline-flex; align-items: center; gap: 6px; }.calendario-turnos-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }.calendario-turnos-legend .is-base { background: #dbeafe; }.calendario-turnos-legend .is-personal { background: #c7d2fe; }.calendario-turnos-legend .is-libre { background: #dcfce7; }.calendario-turnos-legend .is-none { background: #e5e7eb; }

.calendario-grid-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); }

.calendario-turnos-table { border-collapse: collapse; min-width: 980px; width: 100%; background: #fff; }.calendario-turnos-table th, .calendario-turnos-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 5px; text-align: center; }.calendario-turnos-table thead th { position: sticky; top: 0; z-index: 2; background: #f7faff; color: var(--fg-3); font-size: 11px; }.calendario-turnos-table thead small, .calendario-turnos-table thead b { display: block; }.calendario-turnos-table .is-weekend { background: #f5f7fb; }.calendario-worker-col { position: sticky; left: 0; z-index: 1; min-width: 180px; text-align: left !important; background: #fff; padding: 8px 12px !important; }.calendario-turnos-table thead .calendario-worker-col { z-index: 3; background: #f7faff; }.calendario-worker-col strong, .calendario-worker-col small { display: block; }.calendario-worker-col small { color: var(--fg-4); font-size: 10px; font-weight: 600; margin-top: 2px; }

.calendario-cell { display: block; width: 100%; min-width: 64px; height: 34px; border-radius: 7px; border: 1px solid transparent; padding: 4px; font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.calendario-cell.is-base { background: #eff6ff; color: #1d4ed8; }.calendario-cell.is-personal { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }.calendario-cell.is-libre { background: #ecfdf5; color: #047857; }.calendario-cell.is-none { background: #f8fafc; color: #94a3b8; }.calendario-cell.is-selected { outline: 3px solid rgba(79,70,229,.28); outline-offset: 1px; }

.calendario-editor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }.calendario-editor-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; grid-column: 1 / -1; }.calendario-editor-actions button { flex: 0 1 auto; }

.calendario-batch-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }.calendario-weekdays { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 40px; color: var(--fg-3); font-size: 12px; font-weight: 700; }.calendario-weekdays > span { width: 100%; }.calendario-weekdays label { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }.calendario-batch-actions { display: flex; gap: 8px; flex-wrap: wrap; }.calendario-worker-picker { max-height: 320px; overflow: auto; }.calendario-picker-row { cursor: pointer; }.calendario-picker-row input { margin: 0; }

@media (max-width: 900px) { .calendario-turnos-head { flex-direction: column; }.calendario-editor-grid, .calendario-batch-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 560px) { .calendario-mes-control { width: 100%; flex-wrap: wrap; }.calendario-mes-control strong { min-width: 0; flex: 1; }.calendario-editor-grid, .calendario-batch-fields { grid-template-columns: 1fr; }.calendario-editor-actions button, .calendario-batch-actions button { width: 100%; } }





/* V81: planificador automático. La propuesta nunca escribe hasta confirmar. */

.nav-item[data-section="planificadorTurnos"]::before { content: "\1F9E9" !important; }

.planner-panel { display:grid; gap:16px; margin-bottom:16px; }.planner-heading,.planner-proposal-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.planner-heading h2,.planner-panel h2{margin:0 0 5px}.planner-rest-badge{border:1px solid #b9d6f7;background:#eef7ff;color:#185692;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;white-space:nowrap}.planner-main-fields{grid-template-columns:minmax(260px,1.3fr) repeat(2,minmax(150px,.7fr)) auto;align-items:end}.planner-coverage-list,.planner-skills-list{border:1px solid var(--line);border-radius:var(--r-md);overflow:auto;background:#fff}.planner-coverage-row{display:grid;grid-template-columns:minmax(210px,1fr) 130px minmax(240px,1.5fr);gap:12px;align-items:end;padding:12px 14px;border-bottom:1px solid var(--line)}.planner-coverage-row:last-child{border-bottom:0}.planner-coverage-row strong{padding-bottom:10px}.planner-coverage-row label,.planner-skill-row{display:grid;gap:5px;font-size:12px}.planner-skills-list{max-height:390px}.planner-skill-row{grid-template-columns:minmax(230px,.7fr) minmax(280px,1.3fr);align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)}.planner-skill-row:last-child{border-bottom:0}.planner-skill-row span strong,.planner-skill-row span small{display:block}.planner-skill-row small,.planner-table small{display:block;color:var(--fg-4);margin-top:2px;font-size:11px}.planner-result{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;background:#fbfdff}.planner-gaps{border:1px solid #f1c9c9;background:#fff5f5;border-radius:10px;padding:11px 13px;color:#942d2d;margin-bottom:12px}.planner-gaps ul{margin:7px 0 0;padding-left:20px}.planner-ok{border:1px solid #bce7d2;background:#f1fbf6;border-radius:10px;padding:11px 13px;color:#216746;font-weight:700;margin-bottom:12px}.planner-table-wrap{overflow:auto}.planner-table{border-collapse:collapse;width:100%;min-width:720px}.planner-table th,.planner-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.planner-table th{background:#f4f8fd;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}.planner-confirm-actions{display:flex;gap:8px;flex-wrap:wrap}.planner-confirm-actions button:disabled{opacity:.5;cursor:not-allowed}.calendario-turnos-legend .is-planificado{background:#fde68a}.calendario-cell.is-planificado{background:#fffbeb;color:#a16207;border-color:#fde68a}

@media(max-width:900px){.planner-heading,.planner-proposal-heading{flex-direction:column}.planner-main-fields,.planner-coverage-row,.planner-skill-row{grid-template-columns:1fr}.planner-coverage-row strong{padding-bottom:0}.planner-rest-badge{white-space:normal}.planner-main-fields button{width:100%}}



/* V81: el icono del lateral se pinta solo con ::before. Ningún texto de
   navegación lleva emoji propio, así cada etiqueta comienza en la misma X. */
.nav-item::before {
  box-sizing: border-box !important;
  align-self: center !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
  text-align: center !important;
  vertical-align: middle !important;
}


/* V81.1: navegación lateral con retícula óptica estable. */
/* Los emoji tienen márgenes internos diferentes según el glifo y el sistema.
   La retícula y la cápsula fija eliminan el desplazamiento óptico sin usar
   iconos duplicados dentro del texto del botón. */
.nav-item {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  column-gap: 9px !important;
  align-items: center !important;
  justify-content: stretch !important;
  padding: 0 14px !important;
  min-height: 42px !important;
  text-align: left !important;
}
.nav-item::before {
  grid-column: 1 !important;
  place-self: center !important;
  display: grid !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.09) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  text-align: center !important;
  transform: none !important;
}
.nav-item.active::before { background: rgba(255,255,255,.16) !important; }
.nav-item .nav-icon { display: none !important; }


/* V81.2: iconos de administración y difusión con contraste estable. */
/* V81.1 fija la retícula; estas variantes solo aportan identidad y contraste. */
.nav-item[data-section="difusionEvo"]::before {
  content: "" !important;
  background: rgba(255,255,255,.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.6c1.7.9 3.7 1.4 5.8 1.4h.1c6.6 0 12-5.4 12-12S24.7 3 18 3h-2z'/%3E%3Cpath fill='%23ffffff' d='M12.5 9.5c-.3-.6-.5-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.3 1.4 3.5c.2.2 2.4 3.8 5.9 5.1 2.9 1.1 3.5.9 4.2.9.6-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.4-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2-.2.3-.8 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.5-.6.1-.2.2-.3.3-.5.1-.2 0-.4 0-.6-.1-.1-.7-1.8-1-2.4z'/%3E%3C/svg%3E") center/14px 14px no-repeat !important;
}
.nav-item[data-section="users"]::before {
  content: "⚙" !important;
  background: #7c3aed !important;
  color: #fff !important;
  font-family: "Segoe UI Symbol", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.nav-item[data-section="userGenerator"]::before {
  content: "+" !important;
  background: #0284c7 !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
.nav-item.active[data-section="users"]::before { background: #8b5cf6 !important; }
.nav-item.active[data-section="userGenerator"]::before { background: #0ea5e9 !important; }

/* V81.3: cuentas de tablet de terminal QR/NFC. */
.terminales-device-panel { display:grid; gap:14px; border:1px solid #d7e2f1; border-radius:14px; padding:16px; background:#fbfdff; }
.terminales-device-create { display:grid; grid-template-columns:minmax(190px,1fr) minmax(180px,.7fr) minmax(240px,1fr) auto; gap:12px; align-items:end; }
.terminales-device-create label { display:grid; gap:6px; color:var(--muted,#64748b); font-size:.86rem; font-weight:700; }
.terminales-device-create .checkbox-label { display:flex; align-items:center; gap:8px; min-height:42px; }
.terminales-device-key { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid #f0c36c; background:#fff9e8; color:#6b4a0a; padding:12px; border-radius:10px; }
.terminales-device-key code { overflow-wrap:anywhere; padding:7px 9px; border-radius:6px; background:#fff; border:1px solid #f2d69e; color:#23314a; }
.terminales-device-key p { grid-column:1/-1; margin:0; color:#725d2b; font-size:.86rem; }
.terminales-device-list { display:grid; gap:8px; }
.terminales-device-row { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px; border:1px solid #e0e8f3; border-radius:10px; background:#fff; }
.terminales-device-row > div:first-child { display:grid; gap:3px; }
.terminales-device-row span,.terminales-device-row small { color:var(--muted,#64748b); }
.terminales-device-row-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.terminales-device-state { border-radius:999px; padding:5px 8px; font-weight:800; font-size:.78rem; background:#eef4ff; color:#3554a9; white-space:nowrap; }
.terminales-device-state.is-off { background:#fff0f0; color:#a33939; }
@media (max-width:900px) { .terminales-device-create { grid-template-columns:1fr 1fr; } .terminales-device-key { grid-template-columns:1fr; } }
@media (max-width:600px) { .terminales-device-create { grid-template-columns:1fr; } .terminales-device-row { align-items:flex-start; flex-direction:column; } .terminales-device-row-actions { justify-content:flex-start; } }


/* V81.4: alcance de obras de cada tablet. Mantiene el formulario legible
   cuando se alterna entre obra fija, lista concreta o todas las obras. */
.terminales-device-create #terminalesDeviceCrear { grid-column:4; grid-row:1; align-self:end; }
.terminales-device-create .terminales-device-works { grid-column:1/-1; display:grid; gap:8px; border:1px solid #dbe6f3; border-radius:10px; padding:10px 12px; background:#fff; }
.terminales-device-works > strong { color:var(--fg-1); font-size:.84rem; }
.terminales-device-works-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px 12px; max-height:170px; overflow:auto; padding-right:4px; }
.terminales-device-works-list .checkbox-label { min-height:26px; font-size:.84rem; font-weight:600; color:var(--fg-2); }
.terminales-device-create #terminalesDeviceCambioWrap { grid-column:1/-1; }
.terminales-device-scope-help { grid-column:1/-1; margin:-4px 0 0; color:var(--muted,#64748b); font-size:.82rem; line-height:1.35; }
@media (max-width:900px) { .terminales-device-create #terminalesDeviceCrear { grid-column:auto; grid-row:auto; } .terminales-device-works-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .terminales-device-works-list { grid-template-columns:1fr; } }


/* V82: catálogo fijo de tipos de avisos automáticos */
.avisos-tipos-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:30px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.avisos-tipos-cabecera h3{margin:0 0 5px;font-size:16px;color:var(--fg-1)}
.avisos-tipos-cabecera p{margin:0;color:var(--fg-3);font-size:13px;line-height:1.5}
.avisos-tipos-lista{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.aviso-tipo-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.aviso-tipo-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;background:#f8fbff}
.aviso-tipo-toggle{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}
.aviso-tipo-toggle input{min-width:auto;width:17px;height:17px;margin:0}
.aviso-tipo-toggle span{display:flex;flex-direction:column;gap:3px}
.aviso-tipo-toggle strong{font-size:14px;color:var(--fg-1)}
.aviso-tipo-toggle small{font-size:11px;color:var(--fg-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.aviso-tipo-estado{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:#eef2f7;color:#6b7890;font-size:11px;font-weight:800}
.aviso-tipo-estado.is-ready{background:#e9f8f0;color:#19734b}
.aviso-tipo-fields{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:14px;padding:14px 16px;border-top:1px solid var(--line)}
.aviso-tipo-fields label{display:flex;flex-direction:column;gap:6px}
.aviso-tipo-fields label>span{font-size:12px;font-weight:800;color:var(--fg-3)}
.aviso-tipo-fields select,.aviso-tipo-fields textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px 11px;font:inherit;font-size:13px;color:var(--fg-1)}
.aviso-tipo-fields textarea{resize:vertical;min-height:58px;line-height:1.45}
.aviso-tipo-template small{font-size:11px;color:var(--fg-3);line-height:1.4}
@media(max-width:700px){.avisos-tipos-cabecera{flex-direction:column}.aviso-tipo-head{align-items:flex-start;flex-direction:column}.aviso-tipo-fields{grid-template-columns:1fr}}

/* V84: detalle de auditoría bajo demanda desde una celda de Resumen partes. */
.parte-cell-audit{cursor:pointer}
.parte-cell-audit:hover{outline:2px solid #9bbcff;outline-offset:-2px}
.v84-audit-modal-bg{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(18,31,60,.48);backdrop-filter:blur(3px)}
.v84-audit-modal{width:min(820px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;background:#fff;border:1px solid #d7e2f1;border-radius:18px;box-shadow:0 24px 70px rgba(24,45,82,.28);overflow:hidden;color:var(--fg-1,#17233d)}
.v84-audit-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 18px;border-bottom:1px solid #e6edf6;background:#f8fbff}
.v84-audit-kicker{display:block;margin-bottom:5px;color:#5470a8;font-size:11px;font-weight:900;letter-spacing:.08em}
.v84-audit-modal-head h2{margin:0;font-size:22px}.v84-audit-modal-head p{margin:5px 0 0;color:#687995;font-size:13px}
.v84-audit-close{width:34px;height:34px;border:1px solid #d5e1f0;border-radius:9px;background:#fff;color:#304362;font-size:24px;line-height:1;cursor:pointer}
.v84-audit-modal-body{padding:18px 24px 24px;overflow:auto}.v84-audit-loading,.v84-audit-empty,.v84-audit-error{display:grid;gap:6px;padding:26px;border:1px dashed #cbd9eb;border-radius:12px;color:#6b7d99}.v84-audit-empty strong,.v84-audit-error strong{color:#253653}.v84-audit-error{border-color:#efb5b5;background:#fff7f7}.v84-audit-error small{color:#8b5b5b}
.v84-audit-summary{margin-bottom:12px;color:#617491;font-size:12px;font-weight:800}.v84-audit-event{margin-bottom:12px;padding:15px 16px;border:1px solid #dce6f2;border-radius:12px;background:#fff}.v84-audit-event:last-child{margin-bottom:0}.v84-audit-event-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.v84-audit-event-head strong{display:block;font-size:14px}.v84-audit-event-head span{display:block;margin-top:3px;color:#7586a0;font-size:12px}.v84-audit-actor{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:#eef4ff;color:#4162a1!important;font-weight:800!important}.v84-audit-event p{margin:10px 0 0;color:#51627d;font-size:13px}.v84-audit-reason{font-style:italic}.v84-audit-block{margin-top:12px}.v84-audit-block strong,.v84-audit-snapshot-grid strong{display:block;margin-bottom:5px;color:#687995;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.v84-audit-event pre{max-height:180px;margin:0;padding:10px 12px;overflow:auto;border-radius:8px;background:#f5f8fc;color:#3c4e6b;font:12px/1.45 Consolas,Monaco,monospace;white-space:pre-wrap}.v84-audit-snapshots{margin-top:12px;border-top:1px solid #e7edf5;padding-top:10px}.v84-audit-snapshots summary{cursor:pointer;color:#355bb2;font-size:12px;font-weight:800}.v84-audit-snapshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.v84-audit-snapshot-grid>div{min-width:0}
/* V85: "cambios"/"antes"/"despues" en texto legible (etiqueta + valor), no
   como bloque de codigo -- pedido explicito del usuario. */
.v84-audit-campo{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #eef2f8;font-size:13px}.v84-audit-campo:last-child{border-bottom:none}.v84-audit-campo-label{color:#687995;flex:0 0 auto}.v84-audit-campo-valor{color:#243453;font-weight:600;text-align:right;word-break:break-word}.v84-audit-empty-detalle{margin:4px 0;color:#8494ac;font-size:12px;font-style:italic}
@media(max-width:620px){.v84-audit-modal-bg{padding:10px}.v84-audit-modal-head{padding:18px}.v84-audit-modal-body{padding:14px 18px 18px}.v84-audit-event-head{display:grid}.v84-audit-snapshot-grid{grid-template-columns:1fr}.v84-audit-campo{flex-direction:column;gap:2px}.v84-audit-campo-valor{text-align:left}}

/* V96: coherencia visual final del panel.
   Esta capa cierra las reglas históricas del menú y ordena Administración sin
   cambiar IDs, permisos, flujos ni el contenido de los formularios. */
#usersSection.section.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
#usersSection > .admin-config-panel {
  grid-column: 1 / -1;
  margin: 0;
  min-width: 0;
  border-color: #d7e3f2;
  background: #fff;
  box-shadow: 0 10px 28px rgba(25, 49, 91, .07);
}
#usersSection > .mobile-perms-panel {
  display: flex;
  min-width: 0;
  min-height: 218px;
  margin: 0;
  padding: 20px;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #dce6f3;
  border-top: 3px solid #5b78d8;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 8px 22px rgba(25, 49, 91, .05);
}
#usersSection > .mobile-perms-panel h2 {
  margin: 0;
  color: var(--fg-1, #17233d);
  font-size: 17px;
  line-height: 1.25;
}
#usersSection > .mobile-perms-panel .panel-hint {
  margin: 0;
  color: var(--fg-3, #66758f);
  line-height: 1.5;
}
#usersSection > .mobile-perms-panel > div {
  min-width: 0;
}
#usersSection #webRolePermsList,
#usersSection #mobilePermsList,
#usersSection #incidenceTypesList {
  display: grid;
  gap: 8px;
  margin-top: auto;
}
#usersSection .pe-heading {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e6edf6;
}
#usersSection .pe-heading h2 { font-size: 20px; }
#usersSection .pe-actions {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid #d8e4f4;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 20px rgba(25, 49, 91, .10);
}

/* Una retícula fija evita que el ancho óptico de cada emoji desplace las
   etiquetas. Los símbolos simples son consistentes en Windows, Android e iOS. */
.nav-item {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  min-height: 42px !important;
  padding-inline: 14px !important;
}
.nav-item::before {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.08) !important;
  color: #dbe7ff !important;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  transform: none !important;
}
.nav-item.active::before { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.nav-item[data-section="today"]::before { content: "⌂" !important; }
.nav-item[data-section="dashboard"]::before { content: "▤" !important; }
.nav-item[data-section="mapaFichajes"]::before { content: "⌖" !important; }
.nav-item[data-section="stats"]::before { content: "▥" !important; }
.nav-item[data-section="incidences"]::before { content: "△" !important; }
.nav-item[data-section="monthly"]::before { content: "▦" !important; }
.nav-item[data-section="vacations"]::before { content: "✦" !important; }
.nav-item[data-section="workers"]::before { content: "♟" !important; }
.nav-item[data-section="works"]::before { content: "▰" !important; }
.nav-item[data-section="users"]::before { content: "⚙" !important; background: #7c3aed !important; color: #fff !important; }
.nav-item[data-section="userGenerator"]::before { content: "+" !important; background: #0284c7 !important; color: #fff !important; font-family: Arial, sans-serif !important; font-size: 17px !important; }
.nav-item[data-section="connections"]::before { content: "⛓" !important; }
.nav-item[data-section="terminales"]::before { content: "▣" !important; }
.nav-item[data-section="partes"]::before { content: "▤" !important; }
.nav-item[data-section="documents"]::before,
.nav-item[data-section="documentosEnviados"]::before { content: "▱" !important; }
.nav-item[data-section="partesFirmados"]::before { content: "✓" !important; }
.nav-item[data-section="partesGenerados"]::before { content: "▦" !important; }
.nav-item[data-section="enviarPartes"]::before { content: "⇢" !important; }
.nav-item[data-section="subcontratas"]::before { content: "⌁" !important; }
.nav-item[data-section="conversations"]::before { content: "☏" !important; }
.nav-item[data-section="planificadorTurnos"]::before { content: "◫" !important; }
.nav-item[data-section="turnos"]::before { content: "◷" !important; }
.nav-item[data-section="calendarioTurnos"]::before { content: "▦" !important; }
.nav-item[data-section="avisoFinJornada"]::before { content: "◉" !important; }
.nav-item[data-section="difusionEvo"]::before {
  content: "" !important;
  background: rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.6c1.7.9 3.7 1.4 5.8 1.4h.1c6.6 0 12-5.4 12-12S24.7 3 18 3h-2z'/%3E%3Cpath fill='%23fff' d='M12.5 9.5c-.3-.6-.5-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.3 1.4 3.5c.2.2 2.4 3.8 5.9 5.1 2.9 1.1 3.5.9 4.2.9.6-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.4-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2-.2.3-.8 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.5-.6.1-.2.2-.3.3-.5.1-.2 0-.4 0-.6-.1-.1-.7-1.8-1-2.4z'/%3E%3C/svg%3E") center/14px 14px no-repeat !important;
}
@media (max-width: 900px) {
  #usersSection.section.active { grid-template-columns: 1fr; gap: 14px; }
  #usersSection > .mobile-perms-panel { min-height: 0; }
}
@media (max-width: 620px) {
  #usersSection > .admin-config-panel,
  #usersSection > .mobile-perms-panel { padding: 16px; }
  #usersSection .pe-heading h2 { font-size: 18px; }
  #usersSection .pe-actions { position: static; justify-content: stretch; flex-wrap: wrap; }
  #usersSection .pe-actions > button { flex: 1 1 180px; }
}

/* V96.1: Administración es una única columna de paneles consistentes.
   Las matrices son anchas por naturaleza: repartirlas en dos columnas las
   comprime y hace que visualmente parezcan un bloque distinto al principal. */
#usersSection.section.active { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; align-items: stretch !important; }
#usersSection.section.active > .admin-config-panel,
#usersSection.section.active > .mobile-perms-panel { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; box-sizing: border-box !important; margin: 0 !important; border: 1px solid #d7e3f2 !important; border-top: 3px solid #5b78d8 !important; border-radius: 16px !important; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important; box-shadow: 0 10px 28px rgba(25, 49, 91, .07) !important; }
#usersSection.section.active > .mobile-perms-panel { padding: 20px !important; gap: 10px !important; }
#usersSection #webRolePermsList,
#usersSection #mobilePermsList,
#usersSection #incidenceTypesList { margin-top: 6px !important; }
#usersSection .perms-table-scroll { width: 100%; max-width: 100%; overflow: auto; border: 1px solid #e2eaf5; border-radius: 10px; background: #fff; }
@media (max-width: 620px) { #usersSection.section.active { gap: 14px !important; } #usersSection.section.active > .mobile-perms-panel { padding: 16px !important; } }

/* V97: avisos de jornada */
.v97-alert-row{display:grid;grid-template-columns:90px repeat(4,minmax(120px,1fr));gap:10px;align-items:end;padding:14px;border:1px solid #d8e2f1;border-radius:14px;background:#fbfdff;margin:8px 0}.v97-alert-row label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:#536583}.v97-alert-row input[type=text],.v97-alert-row input[type=number],.v97-alert-row input:not([type]){width:100%}.v97-alert-row .pe-check{align-self:center}.jornada-aviso-card{max-width:520px}.jornada-aviso-card #jornadaAvisoActions{display:flex;flex-wrap:wrap;gap:8px}.jornada-aviso-card #jornadaAvisoActions button{flex:1 1 180px}@media(max-width:720px){.v97-alert-row{grid-template-columns:1fr 1fr}.v97-alert-row strong{grid-column:1/-1}}


/* V20: niveles de avisos en una única línea compacta; el bloque se desplaza
   horizontalmente en pantallas estrechas para no crecer en altura. */
.v97-alert-row{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:7px 9px;margin:6px 0;overflow-x:auto;scrollbar-width:thin}
.v97-alert-row>strong{flex:0 0 58px;font-size:12px;white-space:nowrap}
.v97-alert-row>label{flex:0 0 112px;min-width:0;gap:3px;font-size:10px;line-height:1.1}
.v97-alert-row>label:nth-of-type(2){flex-basis:230px}
.v97-alert-row>label.pe-check{flex:0 0 auto;min-width:76px;min-height:32px;padding:4px 6px;white-space:nowrap;justify-content:center;border:1px solid #dbe5f2;border-radius:7px;background:#fff}
.v97-alert-row input{padding:6px 7px;font-size:12px;min-height:30px}
@media(max-width:720px){.v97-alert-row{display:flex;overflow-x:auto}.v97-alert-row>label{flex-basis:108px}.v97-alert-row>label:nth-of-type(2){flex-basis:190px}}
/* V97: control de búsqueda de obras */
.obra-search-input { width: 100%; box-sizing: border-box; margin: 0 0 0.45rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border, #d7dfeb); border-radius: 0.7rem; background: var(--surface, #fff); color: inherit; font: inherit; }
.obra-search-input:focus { outline: 2px solid color-mix(in srgb, var(--primary, #3155d8) 28%, transparent); outline-offset: 1px; }

/* V98.2: selector de obra con buscador integrado (boton + panel), sustituye
   al <select> nativo + buscador aparte de arriba. */
.obra-combo-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.obra-combo { position: relative; }
.obra-combo-trigger {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-align: left; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--fg-1, #172033);
  background: var(--surface, #fff); border: 1px solid var(--border, #d7dfeb); border-radius: 0.7rem; padding: 0.65rem 0.8rem;
  cursor: pointer;
}
.obra-combo-trigger:hover, .obra-combo-trigger:focus-visible { border-color: var(--primary, #3155d8); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3155d8) 16%, transparent); }
.obra-combo-chev { color: var(--fg-3, #617086); font-size: 0.75rem; transition: transform .15s; flex: none; }
.obra-combo-trigger[aria-expanded="true"] .obra-combo-chev { transform: rotate(180deg); }
.obra-combo-popover {
  /* V100: z-index alto a proposito -- en paginas con un mapa Leaflet
     (Mapa de fichajes), los panes internos de Leaflet usan z-index de
     hasta 1000 y quedaban por encima de este popover con z:30. */
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2000;
  background: var(--surface, #fff); border: 1px solid var(--border, #d7dfeb); border-radius: 0.85rem;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25); padding: 0.7rem;
  /* V143 (ajuste pedido): el recuadro cerrado ahora es compacto (solo el
     código), pero el desplegable abierto debe verse grande de verdad para
     leer el nombre completo de la obra sin que se corte. */
  width: max(100%, 340px); max-width: min(460px, calc(100vw - 24px));
  max-height: 360px; display: flex; flex-direction: column; gap: 0.6rem;
}
.obra-combo-popover[hidden] { display: none; }

.obra-combo-search { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--fg-3, #617086); text-transform: uppercase; letter-spacing: .02em; }
.obra-combo-search input {
  width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var(--border, #d7dfeb);
  border-radius: 0.6rem; background: var(--surface, #fff); color: inherit; font: inherit; text-transform: none; letter-spacing: normal; font-weight: 500;
}
.obra-combo-search input:focus { outline: 2px solid color-mix(in srgb, var(--primary, #3155d8) 28%, transparent); outline-offset: 1px; }
.obra-combo-options { display: grid; gap: 6px; overflow-y: auto; max-height: 220px; }
.obra-combo-options button {
  min-height: 44px; border-radius: 0.6rem; background: var(--surface, #fff); border: 1px solid var(--border, #d7dfeb);
  text-align: left; padding: 0.5rem 0.7rem; color: var(--fg-1, #172033); cursor: pointer; transition: background .12s, border-color .12s;
}
.obra-combo-options button:hover { background: color-mix(in srgb, var(--primary, #3155d8) 8%, var(--surface, #fff)); border-color: var(--primary, #3155d8); }
.obra-combo-options button strong { font-size: 0.85rem; font-weight: 700; display: block; }
.obra-combo-options button span { font-size: 0.75rem; color: var(--fg-3, #617086); display: block; margin-top: 1px; }
.obra-combo-empty { padding: 0.6rem 0.3rem; color: var(--fg-3, #617086); font-size: 0.8rem; }

/* V142: la celda puede ser compacta, pero el desplegable nunca debe
   encogerse al ancho de esa celda ni cortar código/nombre de obra.
   V143: la regla de V142 apuntaba a ".partes-filters"/".monthly-panel", que
   NO son las clases reales del contenedor (comprobado en el DOM: tanto
   "Resumen partes" como "Resumen mensual" usan ".monthly-controls") -- por
   eso nunca tuvo efecto. Ajuste pedido despues: el recuadro cerrado solo
   muestra el código de obra (el nombre completo se ve en el desplegable
   abierto, ya ensanchado más abajo), así que le basta un mínimo pequeño en
   vez de uno pensado para el nombre completo. */
.monthly-controls .obra-combo { min-width: 70px; }
.monthly-controls .obra-combo-trigger { min-width: 70px; }
.obra-combo-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-combo-popover .obra-combo-options button { white-space: normal; overflow-wrap: anywhere; }

/* V142: navegación tipo Excel en las celdas editables. */
/* V20: navegar por la rejilla no deja selección visual en celdas vacías.
   El marco solo aparece mientras hay un editor abierto. */
.parte-cell-editable { cursor: cell; position: relative; }
.parte-cell-editable:hover { box-shadow: none; outline: none; outline-offset: 0; }
.parte-cell-editable.parte-cell-editing,
.parte-cell-editable.parte-cell-editing:focus-within { box-shadow: inset 0 0 0 2px #3155d8; background: #f5f8ff; z-index: 4; }
.parte-cell-input { width: 100%; min-width: 64px; box-sizing: border-box; padding: 5px 6px; border: 1px solid #3155d8; border-radius: 6px; background: #fff; color: #172033; font: inherit; font-weight: 700; text-align: center; }
.partes-summary-table td.parte-cell-editing .parte-cell-input { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; min-width: 96px; max-width: 96px; z-index: 20; }
.terminales-qr-copy .toolbar { align-items: center; flex-wrap: wrap; }
.pe-role-checks { display: flex; flex-wrap: wrap; gap: 7px 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pe-role-checks legend { padding: 0 4px; color: var(--muted); font-size: 11px; font-weight: 800; }
.pe-role-checks label { display: inline-flex; flex-direction: row !important; align-items: center; gap: 5px !important; font-size: 12px !important; }

@media (max-width: 700px) {
  .obra-combo-popover { position: absolute; left: auto; right: 0; top: calc(100% + 6px); width: min(300px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
  .obra-combo-options { max-height: min(260px, 42vh); }
  .parte-cell-input { min-width: 72px; }
}


/* V107: controles largos no pueden empujar la tarjeta fuera de la pantalla. */
.pe-grid > label,
.pe-grid > .checkbox-label { min-width: 0; }
.pe-grid > label > input,
.pe-grid > label > select,
.pe-grid > label > textarea,
.pe-grid > label > .toolbar,
.pe-grid > label .toolbar > input,
.pe-grid > label .toolbar > select { max-width: 100%; box-sizing: border-box; }
.pe-grid > label > .toolbar { min-width: 0; flex-wrap: wrap; }
#enviarDocModoLote,
#enviarDocUnidoCopiaAlcance,
#enviarDocUnidoRango { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

/* V107: casillas de Avisos alineadas en una columna fija, aunque cambie el
   texto del tipo o se reduzca el ancho disponible. */
.avisos-tipos-lista .aviso-tipo-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}
.avisos-tipos-lista .aviso-tipo-toggle input[type="checkbox"] {
  grid-column: 1;
  display: block;
  width: 17px;
  min-width: 17px;
  max-width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
}
.avisos-tipos-lista .aviso-tipo-toggle > span {
  grid-column: 2;
  min-width: 0;
}
@media (max-width: 700px) {
  .avisos-tipos-lista .aviso-tipo-head { width: 100%; box-sizing: border-box; }
  .avisos-tipos-lista .aviso-tipo-toggle { width: 100%; }
}


/* V108: cuadrícula semanal de turnos. Los días se leen en columnas y cada
   columna muestra sus tramos debajo. En pantallas estrechas se mantiene la
   orientación horizontal con desplazamiento para no aplastar los controles. */
#turnoDiasGrid { overflow-x: auto; padding-bottom: 5px; }
.turno-semana-grid { display: grid; grid-template-columns: repeat(7, minmax(155px, 1fr)); gap: 8px; min-width: 1100px; }
.turno-dia-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.turno-dia-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--fg-3); font-size: 11px; font-weight: 800; }
.turno-dia-head span { white-space: nowrap; font-size: 10px; color: var(--fg-4); }
.turno-dia-check { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--fg-1); font-size: 14px; cursor: pointer; }
.turno-dia-check input { flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; }
.turno-tramos-lista { display: grid; gap: 8px; }
.turno-tramo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.turno-tramo-row:first-child { padding-top: 0; }
.turno-tramo-label { grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:6px; color: var(--fg-3); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.turno-tramo-duracion { color: var(--blue-ink, #1747af); font-size: 10px; font-weight: 800; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.turno-tramo-duracion.is-empty { color: var(--fg-4); font-weight: 700; }
.turno-tramo-row label { display: grid; gap: 3px; min-width: 0; }
.turno-tramo-row label span { color: var(--fg-4); font-size: 10px; font-weight: 700; }
.turno-tramo-row input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 5px; font-size: 12px; }
.turno-anadir-tramo { width: 100%; padding: 7px 6px; font-size: 11px; }
.turno-max-tramos { margin-top: auto; color: var(--fg-4); text-align: center; font-size: 10px; font-weight: 700; }
.turno-dia-total { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line); color:var(--fg-3); font-size:10px; font-weight:800; }
.turno-dia-total strong { color:var(--fg-1); font-size:11px; white-space:nowrap; }
.turno-dia-total.is-empty strong { color:var(--fg-4); font-weight:700; }
.turno-semana-resumen { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid #cbdaf5; border-radius:10px; background:#eef4ff; color:var(--fg-2); font-size:12px; font-weight:800; }
.turno-semana-resumen strong { color:var(--blue-ink, #1747af); font-size:14px; }
@media (max-width: 760px) { .turno-semana-grid { grid-template-columns: repeat(7, 155px); } }


/* V108: selección de inicios de turno para el aviso de no fichado. */
.avisos-inicio-tramos { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f7faff; }
.avisos-inicio-tramos-titulo { color: var(--fg-3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.avisos-inicio-tramos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.avisos-inicio-tramo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; }
.avisos-inicio-tramo input { flex: 0 0 15px; width: 15px; min-width: 15px; height: 15px; min-height: 15px; margin: 0; }
@media (max-width: 650px) { .avisos-inicio-tramos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V120: templates and shifts: bounded controls and responsive dialogs. */
.enviar-doc-destino-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;align-items:end}
.enviar-doc-destino-grid>label{min-width:0;max-width:100%}
.enviar-doc-destino-grid>label.checkbox-label{flex-direction:row;align-items:center;flex-wrap:nowrap}
.enviar-doc-destino-grid>label.checkbox-label input{width:18px;flex:0 0 18px}
.enviar-doc-destino-grid select,.enviar-doc-destino-grid input{box-sizing:border-box;min-width:0;max-width:100%}
.turno-tramo-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.turno-tramo-row input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:40px}
.turno-dia-card{min-width:0}.turno-semana-grid{align-items:stretch}
.enviar-doc-orden-dialog{max-height:calc(100dvh - 40px);overflow:auto}
@media(max-width:640px){.turno-tramo-row input{font-size:16px}.enviar-doc-orden-modal{padding:12px}.enviar-doc-orden-dialog{max-height:calc(100dvh - 24px)}}

/* V120: spacing in template editor. */
#plantillaEnviarForm .toolbar{gap:10px;align-items:center;flex-wrap:wrap}#plantillaEnviarForm .toolbar>span{min-width:0;overflow-wrap:anywhere}#plantillaEnviarForm .pe-grid>label{min-width:0}#plantillaEnviarForm .pe-grid input{min-width:0;box-sizing:border-box;max-width:100%}

/* V128 · visual audit: scoped layout fixes, without changing business logic. */
.workers-page { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.worker-form-panel, .workers-list-panel { min-width: 0; max-width: 100%; box-sizing: border-box; }
.worker-form-grid :is(input, select), .workers-list-head > * { min-width: 0; max-width: 100%; }
.app .ajustes-subgrupo-toggle { background: #f8fbff !important; color: #334766 !important; border-color: #dce4ef !important; min-height: 44px; box-shadow: none; }
.app .ajustes-subgrupo-toggle:hover, .app .ajustes-subgrupo-toggle[aria-expanded="true"] { background: #edf3ff !important; }
.app .ajustes-subgrupo-titulo { color: #425b7d; font-size: 12px; letter-spacing: .025em; }
.app .ajustes-subgrupo-toggle[aria-expanded="true"] .ajustes-subgrupo-titulo { color: #2346a0; }
.app :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #4263d9; outline-offset: 3px; }
.app .calendario-cell.is-none { background: #f5f7fb !important; color: #64748b !important; border-color: #dce4ef; }
.app .calendario-cell.is-base { background: #eff6ff !important; color: #1d4ed8 !important; }
.app .calendario-cell.is-personal { background: #eef2ff !important; color: #4338ca !important; }
.app .calendario-cell.is-libre { background: #ecfdf5 !important; color: #047857 !important; }
.app .calendario-cell.is-planificado { background: #fffbeb !important; color: #854d0e !important; }
#turnoDiasGrid { max-height: min(65vh, 660px); scrollbar-gutter: stable; }
.turno-dia-head, .turno-tramo-label, .turno-dia-total { line-height: 1.4; }
.turno-tramo-row label span, .turno-tramo-duracion.is-empty, .turno-dia-total.is-empty strong { color: #64748b; }
.turno-semana-grid { grid-template-columns: repeat(7, minmax(172px, 1fr)); min-width: 1252px; }
.plantilla-enviar-contenido { overflow-wrap: anywhere; line-height: 1.5; }
.plantilla-enviar-orden .icon-btn { min-width: 28px; min-height: 36px; }
.enviar-doc-destino-grid { gap: 16px; }
.enviar-doc-destino-grid > label > span { line-height: 1.4; }
@media (max-width: 760px) {
  .plantilla-enviar-orden .icon-btn { min-width: 32px; min-height: 40px; }
  .plantilla-enviar-row > .toolbar > button { min-height: 42px; }
  .pe-categoria { padding-inline: 8px; }
  .planner-heading, .planner-proposal-heading { flex-wrap: wrap; }
  .planner-rest-badge { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* V132: calendar controls must fit their tracks; keep day labels in sight. */
.calendario-editor-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))!important}
.calendario-editor-grid>label{min-width:0}
.calendario-editor-grid input,.calendario-editor-grid select{box-sizing:border-box;width:100%;min-width:0;max-width:100%}
.turno-dia-head{position:sticky;top:0;z-index:2;background:#fbfdff}

/* V137: el filtro de obra del resumen no debe quedar en una columna
   estrecha que impida abrir y leer sus opciones. */
#partesSection .partes-filters label[data-sort-key="filtro-obra"] { min-width: min(280px, 100%); }
#partesSection #partesObraFilter { width: 100%; min-width: 240px; min-height: 48px; padding-right: 32px; font-size: 15px; }
@media (max-width: 900px) {
  #partesSection #partesObraFilter { min-width: 0; }
}

/* V137: QR de activación descargable desde el aviso de clave nueva. */
.terminales-device-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.terminales-device-qr img { grid-row: span 2; width: 150px; height: 150px; image-rendering: auto; background: #fff; border: 1px solid #e5c878; border-radius: 8px; }
.terminales-device-qr a { justify-self: start; }
.terminales-device-qr small { color: #725d2b; }

/* V153: el resumen anclado al viewport en modo enfoque ocupa y centra todo el viewport.
   Este bloque queda al final para ganar también a las reglas antiguas de
   escritorio que limitaban .content a una columna lateral. */
html:has(body.modo-enfoque-v143),
body.modo-enfoque-v143,
body.modo-enfoque-v143 #appView,
body.modo-enfoque-v143 #appView > .content,
body.modo-enfoque-v143 #partesSection,
body.modo-enfoque-v143 #partesTablePanel,
body.modo-enfoque-v143 #partesSection .partes-table-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
body.modo-enfoque-v143 #appView {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: auto !important;
  justify-self: stretch !important;
}
body.modo-enfoque-v143 { overflow: hidden !important; }
body.modo-enfoque-v143 #appView > .content {
  min-width: 0 !important;
  justify-self: stretch !important;
}

/* V154: guía NFC visible y accionable, sin mezclarla con la explicación
   técnica del backend. */
.terminales-nfc-guide {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #d8e3f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f6fc 100%);
}
.terminales-nfc-guide h3 { margin: 0 0 10px; font-size: 16px; color: #1e3152; }
.terminales-nfc-guide ol { margin: 0; padding-left: 22px; display: grid; gap: 7px; color: #40516d; line-height: 1.45; }
.terminales-nfc-guide p { margin: 12px 0 0; line-height: 1.45; }
.terminales-nfc-guide code { padding: 2px 5px; border-radius: 5px; background: #e7eef9; color: #243b73; }
.terminales-nfc-copy-status { display: block; min-height: 18px; color: #2f7a50; }


/* V03/Fase 3 UX: diálogo único para todas las líneas del parte. */
.v03-tipos-panel-card{max-width:720px}.v03-tipos-panel-card .modal-head{align-items:flex-start}.v03-tipos-panel-card .modal-head small{display:block;margin-top:4px;color:var(--muted,#6b7890);font-weight:500}.v03-panel-content{display:flex;flex-direction:column;gap:10px}.v03-panel-tipo-row label{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line,#d7e0ef);border-radius:12px;padding:10px}.v03-panel-tipo-row label>strong,.v03-panel-tipo-row label>small{margin-right:4px}.v03-panel-tipo-row label>span{display:flex;align-items:center;gap:5px;min-width:190px}.v03-panel-tipo-row input{width:150px}.v03-panel-extra{display:flex;flex-direction:column;gap:8px;padding:8px;border-top:1px dashed var(--line,#d7e0ef)}.v03-panel-toggle,.v03-panel-add{align-self:flex-start;border:1px solid var(--line,#d7e0ef);border-radius:10px;background:#fff;color:var(--ink,#18253d);font-weight:700;padding:8px 11px}.v03-panel-add{width:100%}.v03-panel-tipo-row .v03-tipo-remove{width:28px;height:28px;border:0;border-radius:8px;background:#f2f5fb;color:#6b7890;font-size:18px}.v03-tipos-panel-card .modal-foot{display:flex;justify-content:flex-end;gap:8px}@media(max-width:620px){.v03-panel-tipo-row label{align-items:stretch;flex-direction:column}.v03-panel-tipo-row label>span{min-width:0}.v03-panel-tipo-row input{width:100%}}

/* V05: editor único del parte diario desde Ficha trabajador. */
.v05-ficha-parte-card{max-width:760px}.v05-ficha-parte-card .modal-head small{display:block;margin-top:4px;color:var(--muted,#6b7890);font-weight:500}.v05-ficha-parte-content{display:flex;flex-direction:column;gap:12px}.v05-ficha-parte-label{display:flex;flex-direction:column;gap:6px;color:var(--fg-2,#33415c);font-size:12px;font-weight:800}.v05-ficha-parte-label input,.v05-ficha-parte-label select,.v05-ficha-parte-label textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line,#d7e0ef);border-radius:10px;font:inherit;font-size:14px;resize:vertical}.v05-ficha-parte-label input:focus,.v05-ficha-parte-label select:focus,.v05-ficha-parte-label textarea:focus{outline:none;border-color:var(--blue,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.v05-ficha-parte-help,.v05-ficha-parte-muted{margin:0;color:var(--muted,#6b7890);font-size:12px;line-height:1.4}.v05-ficha-parte-section-title{margin-top:4px;color:var(--fg-1,#18253d);font-weight:800;font-size:13px}.v05-ficha-parte-card .modal-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.v05-ficha-parte-delete{color:#9b2c2c;border-color:#efb6b6!important;background:#fff7f7!important}@media(max-width:620px){.v05-ficha-parte-card{max-width:calc(100vw - 24px)}.v05-ficha-parte-card .modal-foot{justify-content:stretch}.v05-ficha-parte-card .modal-foot button{flex:1}.v05-ficha-parte-label input,.v05-ficha-parte-label select,.v05-ficha-parte-label textarea{font-size:16px}}

/* V06/Fase 6: desglose visible dentro de las celdas de Resumen partes firmados. */
.pf-tipos-cell{display:block;margin-top:3px;font-size:10px;line-height:1.2;text-align:left;position:relative;z-index:2}
.pf-tipos-cell summary{cursor:pointer;color:#2563eb;font-weight:800;list-style:none;white-space:nowrap}
.pf-tipos-cell summary::-webkit-details-marker{display:none}
.pf-tipos-cell>div{min-width:150px;background:#fff;border:1px solid #bfdbfe;border-radius:7px;padding:4px 6px;box-shadow:0 5px 12px rgba(15,23,42,.14)}
.pf-tipos-cell>div>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #e2e8f0;padding:2px 0}
.pf-tipos-cell>div>div:last-child{border-bottom:0}


/* V06 EXTRA - modal de cambio masivo de obra */
.bulk-work-card { width: min(920px, 100%); }
.bulk-work-card .modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 24px; }
.bulk-work-card .modal-actions button { min-width: 126px; min-height: 38px; justify-content: center; }
.bulk-work-body { display: grid; gap: 14px; }
.bulk-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bulk-work-grid label, .bulk-work-motive { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted, #64748b); }
.bulk-work-grid select, .bulk-work-grid input, .bulk-work-motive input { width: 100%; min-height: 40px; }
.bulk-work-help { margin: 0; color: var(--muted, #64748b); font-size: 13px; }
.bulk-work-summary { padding: 10px 12px; border: 1px solid var(--line, #dbe4f0); border-radius: 10px; background: #f7faff; color: var(--fg-1, #17233d); font-size: 13px; }
.bulk-work-days { display: grid; gap: 8px; max-height: 280px; overflow: auto; padding: 2px; }
.bulk-work-day { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #dbe4f0); border-radius: 10px; cursor: pointer; background: #fff; }
.bulk-work-day:hover { border-color: #88a9df; background: #f7faff; }
.bulk-work-day span { display: grid; gap: 3px; }
.bulk-work-day small { color: var(--muted, #64748b); font-weight: 500; }
.bulk-work-empty, .bulk-work-loading { padding: 18px; border: 1px dashed var(--line, #dbe4f0); border-radius: 10px; color: var(--muted, #64748b); text-align: center; }
@media (max-width: 680px) { .bulk-work-grid { grid-template-columns: 1fr; } .bulk-work-card { max-height: 92vh; } .bulk-work-card .modal-actions { justify-content: stretch; } .bulk-work-card .modal-actions button { flex: 1 1 140px; } }


/* Ajuste visual: separar el botón de envío del campo de mensaje. */
.ep-send-actions { display: flex; align-items: center; margin-top: 18px; padding-top: 4px; }
#epEnviarButton { margin-top: 0; }


/* V04 - protección visual de partes emitidos en cambio masivo de obra */
.bulk-work-apply-parts { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid #c9d8ee; border-radius: 10px; background: #f7faff; color: var(--fg-1, #17233d); }
.bulk-work-apply-parts span { display: grid; gap: 3px; }
.bulk-work-apply-parts small { color: var(--muted, #64748b); font-weight: 500; }
.bulk-work-day-protected { border-color: #e2a24a; background: #fff8e8; }
.bulk-work-day-protected small { color: #9a5b00; }


/* V09: lenguaje visual común para Administrar, Avisos y Ajustes de empresa.
   Estos bloques se habían ido construyendo en rondas distintas y acababan
   heredando tamaños, fuentes y rejillas diferentes. La capa final mantiene
   los IDs/JS existentes, pero fija una misma escala, evita solapes y hace que
   los campos respiren igual en escritorio, tablet y móvil. */
#usersSection .admin-config-panel,
#avisoFinJornadaSection .form-panel,
#ajustesEmpresaSection .form-panel {
  color: var(--fg-1, #172033);
  font-family: inherit;
}

#usersSection .admin-config-panel .pe-accordion-item,
#avisoFinJornadaSection .pe-accordion-item,
#ajustesEmpresaSection .pe-accordion-item {
  margin: 10px 0;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(30, 58, 95, .035);
}

#usersSection .admin-config-panel .pe-accordion-toggle,
#avisoFinJornadaSection .pe-accordion-toggle,
#ajustesEmpresaSection .pe-accordion-toggle {
  min-height: 50px;
  padding: 13px 16px;
  line-height: 1.25;
  font-family: inherit;
  color: #1c2b45;
}

#usersSection .admin-config-panel .pe-accordion-title,
#avisoFinJornadaSection .pe-accordion-title,
#ajustesEmpresaSection .pe-accordion-title {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#usersSection .admin-config-panel .pe-accordion-body,
#avisoFinJornadaSection .pe-accordion-body,
#ajustesEmpresaSection .pe-accordion-body {
  padding: 16px 18px 20px;
  background: #f8fbff;
  border-top: 1px solid #e8eef7;
}

#usersSection .admin-config-panel .pe-grid,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows),
#avisosOtrosLista .pe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin: 12px 0 0;
  min-width: 0;
}

#usersSection .admin-config-panel .pe-grid > label,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > label,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) > label,
#avisosOtrosLista .pe-grid > label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #dce6f3;
  border-radius: 12px;
  background: #fff;
  color: #1d2d49;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#usersSection .admin-config-panel .pe-grid > label > span,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > label > span,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) > label > span,
#avisosOtrosLista .pe-grid > label > span {
  display: block;
  min-height: 0;
  margin: 0;
  color: #5d708e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

#usersSection .admin-config-panel .pe-grid input,
#usersSection .admin-config-panel .pe-grid select,
#usersSection .admin-config-panel .pe-grid textarea,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid input,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid select,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid textarea,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) input,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) select,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) textarea,
#avisosOtrosLista .pe-grid input,
#avisosOtrosLista .pe-grid select,
#avisosOtrosLista .pe-grid textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #cedbeb;
  border-radius: 10px;
  background: #fff;
  color: #1b2b46;
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
}

#usersSection .admin-config-panel .pe-grid textarea,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid textarea,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) textarea,
#avisosOtrosLista .pe-grid textarea {
  min-height: 88px;
  resize: vertical;
}

#usersSection .admin-config-panel .pe-grid input:focus,
#usersSection .admin-config-panel .pe-grid select:focus,
#usersSection .admin-config-panel .pe-grid textarea:focus,
#avisoFinJornadaSection .pe-accordion-body input:focus,
#avisoFinJornadaSection .pe-accordion-body select:focus,
#avisoFinJornadaSection .pe-accordion-body textarea:focus,
#ajustesEmpresaSection .pe-accordion-body input:focus,
#ajustesEmpresaSection .pe-accordion-body select:focus,
#ajustesEmpresaSection .pe-accordion-body textarea:focus,
#avisosOtrosLista .pe-grid input:focus,
#avisosOtrosLista .pe-grid select:focus,
#avisosOtrosLista .pe-grid textarea:focus {
  outline: none;
  border-color: #5278df;
  box-shadow: 0 0 0 3px rgba(49, 91, 217, .12);
}

#usersSection .admin-config-panel .pe-grid > label > small,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > label > small,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) > label > small,
#avisosOtrosLista .pe-grid > label > small {
  display: block;
  margin: 0;
  color: #71819a;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
}

/* Checkboxes siguen siendo compactos, pero con la misma tarjeta y tipografía. */
#usersSection .admin-config-panel .pe-grid > label.pe-check,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > label.pe-check,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) > label.pe-check,
#avisosOtrosLista .pe-grid > label.pe-check {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
}
#usersSection .admin-config-panel .pe-grid > label.pe-check input,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > label.pe-check input,
#ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows) > label.pe-check input,
#avisosOtrosLista .pe-grid > label.pe-check input {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Los listados largos ocupan toda la fila y no estrangulan los campos vecinos. */
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > .pe-worker-list,
#avisoFinJornadaSection .pe-accordion-body > .pe-grid > button,
#usersSection .admin-config-panel .pe-grid > .pe-worker-list,
#ajustesEmpresaSection .pe-accordion-body .pe-grid > .pe-worker-list {
  grid-column: 1 / -1;
  min-width: 0;
}

#avisoFinJornadaSection .pe-divider,
#usersSection .admin-config-panel .pe-divider,
#ajustesEmpresaSection .pe-divider,
#avisosOtrosLista .pe-divider {
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid #dfe8f4;
  color: #466184;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#avisoFinJornadaSection .panel-muted,
#usersSection .admin-config-panel .panel-muted,
#ajustesEmpresaSection .panel-muted,
#avisosOtrosLista .panel-muted {
  color: #6c7d97;
  font-size: 12px;
  line-height: 1.45;
}

/* El bloque especial de avisos de inicio necesita una composición estable:
   el texto ocupa dos columnas y la selección de tramos no se encoge. */
#avisosOtrosLista .pe-accordion-body > .pe-grid > label:has(textarea),
#avisosOtrosLista .pe-accordion-body > .pe-grid > label:has([data-aviso-no-fichado-inicios]),
#avisosOtrosLista .pe-accordion-body > .pe-grid > label:has([data-aviso-otro-campo="hora_sin_turno"]),
#avisosOtrosLista .pe-accordion-body > .pe-grid > .avisos-inicio-tramos {
  grid-column: span 2;
}
#avisosOtrosLista .avisos-inicio-tramos {
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #dce6f3;
  border-radius: 12px;
  background: #fff;
}
#avisosOtrosLista .avisos-inicio-tramos-titulo {
  display: block;
  margin-bottom: 9px;
  color: #5d708e;
  font-size: 11px;
  font-weight: 800;
}
#avisosOtrosLista .avisos-inicio-tramos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
#avisosOtrosLista .avisos-inicio-tramo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e1e9f4;
  border-radius: 8px;
  background: #f8fbff;
  color: #425775;
  font-size: 11px;
  font-weight: 700;
}
#avisosOtrosLista .avisos-inicio-tramo input { width: auto; min-height: 0; padding: 0; }

/* En Ajustes de empresa los avisos delegados y la nube usan la misma escala
   que el resto, sin volver a convertir las filas deliberadamente lineales en
   tarjetas estrechas. */
#ajustesEmpresaSection .avisos-empresa-panel { max-width: none; }
#ajustesEmpresaSection .ajustes-delegados-fila {
  min-width: 0;
  padding: 11px 0;
}
#ajustesEmpresaSection .ajustes-delegados-fila > span {
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#ajustesEmpresaSection .pe-grid.pe-grid-rows,
#ajustesEmpresaSection #nubeDestinosPanel .pe-grid {
  margin-top: 12px;
  border-color: #dce6f3;
  border-radius: 12px;
  background: #fff;
}
#ajustesEmpresaSection .pe-grid.pe-grid-rows > label,
#ajustesEmpresaSection #nubeDestinosPanel .pe-grid > label {
  min-width: 0;
  padding: 13px 15px;
  border-bottom-color: #e5ecf5;
  font-family: inherit;
}
#ajustesEmpresaSection .pe-grid.pe-grid-rows > label > span,
#ajustesEmpresaSection #nubeDestinosPanel .pe-grid > label > span {
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  #usersSection .admin-config-panel .pe-grid,
  #avisoFinJornadaSection .pe-accordion-body > .pe-grid,
  #ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows),
  #avisosOtrosLista .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #usersSection .admin-config-panel .pe-grid,
  #avisoFinJornadaSection .pe-accordion-body > .pe-grid,
  #ajustesEmpresaSection .pe-accordion-body .pe-grid:not(.pe-grid-rows),
  #avisosOtrosLista .pe-grid { grid-template-columns: 1fr; }
  #avisosOtrosLista .pe-accordion-body > .pe-grid > label:has(textarea),
  #avisosOtrosLista .pe-accordion-body > .pe-grid > label:has([data-aviso-no-fichado-inicios]),
  #avisosOtrosLista .pe-accordion-body > .pe-grid > label:has([data-aviso-otro-campo="hora_sin_turno"]),
  #avisosOtrosLista .pe-accordion-body > .pe-grid > .avisos-inicio-tramos { grid-column: auto; }
  #avisosOtrosLista .avisos-inicio-tramos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ajustesEmpresaSection .ajustes-delegados-fila { align-items: stretch; flex-direction: column; gap: 8px; }
  #ajustesEmpresaSection .ajustes-delegados-fila select { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
  #usersSection .admin-config-panel .pe-accordion-body,
  #avisoFinJornadaSection .pe-accordion-body,
  #ajustesEmpresaSection .pe-accordion-body { padding: 13px 12px 16px; }
  #avisosOtrosLista .avisos-inicio-tramos-grid { grid-template-columns: 1fr; }
}

/* V09.1: el detalle de Partes generados/firmados también conserva el
   desglose que ya viajaba dentro de lineas[].desglose_tipos. */
.pf-tipos-detalle {
  display: grid;
  gap: 3px;
  min-width: 120px;
  color: #334766;
  font-size: 11px;
  line-height: 1.25;
}
.pf-tipos-detalle > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 5px;
  border-radius: 6px;
  background: #f5f8fd;
  white-space: nowrap;
}
.pf-tipos-detalle b { color: #536985; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.pf-tipos-detalle em { color: #1d4ed8; font-style: normal; font-weight: 800; }
.pf-weekly-tipos { margin-top: 5px; min-width: 0; font-size: 10px; }
.pf-weekly-tipos > span { display: block; white-space: normal; }
.pf-tabla th, .pf-tabla td { vertical-align: middle; }

/* V16: Avisos se lee de arriba abajo; los tipos no son submenús. */
#avisosAcordeonFijo { display: grid; gap: 8px; margin-top: 9px; }
#avisoFinJornadaSection .avisos-seccion {
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
#avisoFinJornadaSection .avisos-seccion-titulo,
#avisosOtrosLista .avisos-otros-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 11px;
  background: #fbfdff;
  border-bottom: 1px solid #e8eef7;
}
#avisoFinJornadaSection .avisos-seccion-titulo .pe-accordion-title,
#avisosOtrosLista .avisos-otros-cabecera .pe-accordion-title { font-size: 12px; color: #1c2b45; }
#avisoFinJornadaSection .avisos-seccion-cuerpo { padding: 10px 12px 12px; }
#avisosOtrosLista { display: grid; gap: 8px; margin-top: 9px; }
#avisosOtrosLista .avisos-otros-bloque {
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
#avisosOtrosLista .avisos-otros-cabecera { min-height: 36px; padding: 6px 10px; }
#avisosOtrosLista .avisos-otros-cuerpo { padding: 8px 10px 10px; }
#avisosOtrosLista .avisos-niveles-explicacion,
#avisoFinJornadaSection .avisos-niveles-explicacion { max-width: 1100px; line-height: 1.45; }