/* ===========================================================================
   MGM — SISTEMA DE DISEÑO
   Modo Operate: herramienta de campo. La marca vive en el detalle preciso,
   no en superficie coloreada. Paleta derivada del logo (vinotinto/dorado/crema).
   Contrastes verificados por calculo, no a ojo:
     neutro-600 6.58:1 · neutro-700 10.60:1 · marca-700 14.87:1 sobre blanco
     neutro-500 da 4.27:1 -> NO usar como texto de cuerpo
     oro-500 da 2.22:1 sobre blanco -> relleno o borde, NUNCA texto
   =========================================================================== */
:root {
  /* Marca */
  --mgm-marca-900:#2c0c13; --mgm-marca-800:#3a1019; --mgm-marca-700:#4a1420;
  --mgm-marca-600:#5c1a28; --mgm-marca-500:#73202f; --mgm-marca-400:#9c4453;
  --mgm-marca-300:#c08894; --mgm-marca-200:#e3c5cb; --mgm-marca-100:#f2e2e5;
  --mgm-marca-50: #faf1f3;

  /* Oro: rol de atencion/aviso, como el ambar de seguridad industrial */
  --mgm-oro-700:#8a6512; --mgm-oro-600:#a87d1c; --mgm-oro-500:#d9a62e;
  --mgm-oro-400:#e5bb5c; --mgm-oro-300:#eed08f; --mgm-oro-200:#f5e6c0;
  --mgm-oro-100:#faf1da; --mgm-oro-50: #fdf8ec;

  /* Neutros CALIDOS: sustituyen al slate frio, que peleaba con la marca */
  --mgm-n-950:#17120f; --mgm-n-900:#241c17; --mgm-n-800:#33281f;
  --mgm-n-700:#4a3c31; --mgm-n-600:#6b5a4c; --mgm-n-500:#8a7767;
  --mgm-n-400:#a89686; --mgm-n-300:#c9bcb0; --mgm-n-200:#e2d9d1;
  --mgm-n-100:#efe9e3; --mgm-n-50: #f8f5f2;

  /* Semanticos (heredados de la paleta MGM original) */
  --mgm-exito:#167a5b;  --mgm-exito-bg:#e8f5f0;
  --mgm-riesgo:#b83a32; --mgm-riesgo-bg:#fbecea;
  --mgm-aviso:#8a6512;  --mgm-aviso-bg:#faf1da;   /* texto oro-700 sobre oro-100 = 4.72:1 */
  --mgm-info:#295f92;   --mgm-info-bg:#e9f0f7;

  /* Roles */
  --mgm-fondo:var(--mgm-n-50);
  --mgm-superficie:#ffffff;
  --mgm-borde:var(--mgm-n-200);
  --mgm-borde-fuerte:var(--mgm-n-300);
  --mgm-texto:var(--mgm-n-900);
  --mgm-texto-2:var(--mgm-n-700);
  --mgm-texto-apagado:var(--mgm-n-600);   /* el 500 no llega a 4.5:1 */

  /* Profundidad: siempre desplazamiento + desenfoque suave. Nada de halos planos. */
  --mgm-sombra-1:0 1px 2px rgba(36,28,23,.06), 0 1px 1px rgba(36,28,23,.04);
  --mgm-sombra-2:0 2px 4px rgba(36,28,23,.07), 0 4px 10px rgba(36,28,23,.05);
  --mgm-sombra-3:0 4px 8px rgba(36,28,23,.08), 0 12px 24px rgba(36,28,23,.07);

  --mgm-r-sm:4px; --mgm-r-md:8px; --mgm-r-lg:12px; --mgm-r-full:999px;
  --mgm-foco:0 0 0 2px #ffffff, 0 0 0 4px var(--mgm-marca-500);

  /* Tipografia: Fira Sans es un grotesco humanista dibujado para legibilidad
     en pantalla a tamaño pequeño; numerales inequivocos, lectura industrial
     y no "startup". Fira Mono queda para OT, codigos y dinero. */
  --mgm-sans:"Fira Sans","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mgm-mono:"Fira Mono",var(--mgm-mono);
}

:root {
    --bg-dark: #f4f3ef;
    --bg-dark-accent: #ffffff;
    --brand-primary: #4a1420;
    --brand-primary-hover: #5c1a28;
    --text-light: #17120f;
    --text-muted: #4a4742;
    --border-color: #dedbd2;
    --success-color: #168a4a;
    --danger-color: #c83c2e;
    --warning-color: #a87d1c;
    --sidebar-width: 260px;
    --surface: #ffffff;
    --surface-2: #ebe9e3;
    --surface-soft: #fbfaf7;
    --surface-muted: #ebe9e3;
    --ink: #241c17;
    --ink-soft: #56534c;
    --accent: #4a1420;
    /* equipment-index pin colors — duplicated at :root so Leaflet divIcon
       can resolve them outside .equipment-index-shell scope */
    --ei-green: #2fbf71;
    --ei-red: #dc4c42;
    --ei-amber: #d9a62e;
    --ei-teal: #39a6a2;
}

/* Seguimiento del planificador */
#main-app {
    width: 100%;
}

#sidebar,
.sidebar-nav,
#sidebar nav,
.nav-link {
    box-sizing: border-box;
}

#sidebar {
    align-self: stretch;
    min-height: 100dvh;
}

#sidebar nav,
.sidebar-nav,
.nav-link {
    width: 100%;
}

#planner-view .planner-tracking-panel {
    margin-top: 1rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

#planner-view .planner-tracking-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.planner-tracking-filters {
    display: flex;
    gap: 0.35rem;
}
.planner-tf-btn {
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, #666);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.planner-tf-btn:hover { background: #faf1f3; border-color: #4a1420; color: #4a1420; }
.planner-tf-active { background: #4a1420 !important; border-color: #4a1420 !important; color: #fff !important; }

.tasks-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.tasks-view-header h3 { margin: 0; }
.tasks-filters { display: flex; gap: 0.35rem; }

#planner-view .planner-tracking-header h3 {
    margin: 0.1rem 0 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
}

#planner-view .planner-tracking-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #faf1f3;
    color: #4a1420;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

#planner-view .planner-tracking-table-wrap {
    width: 100%;
    overflow-x: auto;
}

#planner-view .planner-tracking-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
    font-size: 0.82rem;
}

#planner-view .planner-tracking-table thead tr {
    background: #f8fafc;
}

#planner-view .planner-tracking-table th,
#planner-view .planner-tracking-table td {
    padding: 0.82rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

#planner-view .planner-tracking-table th {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#planner-view .planner-tracking-table td strong {
    display: block;
    color: var(--ink);
    font-weight: 800;
}

#planner-view .planner-tracking-table td small {
    display: block;
    max-width: 340px;
    margin-top: 0.22rem;
    color: var(--text-muted);
    line-height: 1.35;
}

#planner-view .planner-tracking-table tbody tr {
    border-bottom: 2px solid rgba(255, 91, 31, 0.15);
}

#planner-view .planner-tracking-table tbody tr:last-child {
    border-bottom: none;
}

#planner-view .planner-tracking-table tbody tr:hover {
    background: #fdf8ec;
}

#planner-view .planner-tracking-table tbody tr.is-completed {
    background: #fbfdfc;
}

#planner-view .planner-tracking-table tbody tr.is-completed td strong {
    color: #8a7767;
}

#planner-view .planner-tracking-action {
    min-height: 30px;
    padding: 0.38rem 0.7rem;
    border: 1px solid #f5e6c0;
    border-radius: 8px;
    background: #fdf8ec;
    color: #73202f;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

#planner-view .planner-tracking-action:hover {
    background: #4a1420;
    border-color: #4a1420;
    color: #ffffff;
}

#planner-view .planner-tracking-empty-row td {
    padding: 1.35rem;
    color: var(--text-muted);
    text-align: center;
}

@media (min-width: 1024px) {
    #main-app,
    body:not(.app-not-authenticated) #main-app {
        width: 100vw;
        min-width: 100vw;
        margin: 0;
    }

    #sidebar,
    body:not(.app-not-authenticated) #sidebar {
        height: 100dvh;
        min-height: 100dvh;
    }
}

@media (max-width: 760px) {
    #planner-view .planner-tracking-header {
        align-items: flex-start;
        flex-direction: column;
    }

    #planner-view .planner-tracking-table thead {
        display: none;
    }

    #planner-view .planner-tracking-table,
    #planner-view .planner-tracking-table tbody,
    #planner-view .planner-tracking-table tr,
    #planner-view .planner-tracking-table td {
        display: block;
        width: 100%;
    }

    #planner-view .planner-tracking-table tr {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    #planner-view .planner-tracking-table td {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.38rem 0;
        border: 0;
    }

    #planner-view .planner-tracking-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--mgm-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-size: 16px;
}

@media (min-width: 1280px) {
    body.web-desktop-compact {
        zoom: 1;
        --sidebar-width: 236px;
    }

    body.web-desktop-compact #main-content {
        padding: 1rem 1rem 64px 1rem;
    }

    body.web-desktop-compact #sidebar {
        gap: 0.8rem;
        padding: 1.1rem 0.85rem;
    }

    body.web-desktop-compact .section-header {
        margin-bottom: 1rem;
    }

    body.web-desktop-compact .card,
    body.web-desktop-compact .modal-header,
    body.web-desktop-compact .report-builder-grid,
    body.web-desktop-compact .report-signatures,
    body.web-desktop-compact .report-received-body,
    body.web-desktop-compact .report-modal-content .equipment-card-header,
    body.web-desktop-compact .report-modal-content .equipment-card-body {
        padding: 0.82rem;
    }

    body.web-desktop-compact .dashboard-wrapper,
    body.web-desktop-compact .dashboard-metrics-grid,
    body.web-desktop-compact .dashboard-analytics-grid,
    body.web-desktop-compact .dashboard-bottom-grid,
    body.web-desktop-compact .report-builder-body,
    body.web-desktop-compact .report-builder-grid,
    body.web-desktop-compact .report-modal-content .equipment-fields,
    body.web-desktop-compact .report-modal-content .equipment-fields-row-compact,
    body.web-desktop-compact .form-grid,
    body.web-desktop-compact .equipment-form-grid {
        gap: 0.75rem;
    }

    body.web-desktop-compact .modal-content {
        width: min(980px, calc(100% - 1.25rem));
        height: 92vh;
        max-height: 92vh;
    }

    body.web-desktop-compact .report-modal-content {
        width: min(1120px, calc(100% - 1rem));
    }

    body.web-desktop-compact .report-builder-field input,
    body.web-desktop-compact .report-builder-field select,
    body.web-desktop-compact .report-builder-field textarea,
    body.web-desktop-compact .report-material-row input,
    body.web-desktop-compact .report-material-row select,
    body.web-desktop-compact .form-group input,
    body.web-desktop-compact .form-group textarea,
    body.web-desktop-compact .form-group select {
        padding: 0.72rem 0.82rem;
        font-size: 0.9rem;
    }

    body.web-desktop-compact .report-signature-canvas-wrap canvas {
        height: 118px;
    }

    body.web-desktop-compact .report-chip {
        padding: 0.55rem 0.88rem;
        font-size: 0.82rem;
    }
}

body.app-not-authenticated #bottom-nav {
    display: none !important;
}

body.apk-native #logout-btn-mobile {
    display: none !important;
}

.hidden {
    display: none !important;
}

.global-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(2, 6, 23, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.global-loading-box {
    min-width: 220px;
    max-width: 320px;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.95);
    padding: 1rem 1.2rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.global-loading-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: #5c1a28;
    animation: global-spin 0.8s linear infinite;
}

#global-loading-text {
    margin: 0;
    font-size: 0.9rem;
    color: #efe9e3;
    text-align: center;
}

body.loading-open {
    overflow: hidden;
}

@keyframes global-spin {
    to {
        transform: rotate(360deg);
    }
}

#login-section {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}

.login-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.login-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fondo degradado detrás del video (se ve si el video aún no cargó o al pausarse) */
html.apk-native .login-background {
    background: linear-gradient(160deg, #20080d 0%, #1a3a6e 50%, #20080d 100%);
}

.login-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

.login-panel {
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: rgba(20, 25, 40, 0.88);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.login-header {
    text-align: center;
}

.login-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

#login-form label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

#login-form input {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    color: white;
    transition: all 0.2s ease-in-out;
}

#login-form input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.4);
}

#login-form button {
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background-color: var(--brand-primary);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.3);
}

#login-form .login-biometric-btn {
    width: auto;
    min-width: 0;
    margin: 0.9rem auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.login-biometric-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
}

.login-biometric-scanner {
    position: relative;
    width: 5.2rem;
    height: 5.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-biometric-orbit {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.22);
}

.login-biometric-orbit-a {
    inset: 0;
    animation: biometric-spin 5.2s linear infinite;
}

.login-biometric-orbit-b {
    inset: 0.42rem;
    border-style: dashed;
    border-color: rgba(249, 115, 22, 0.28);
    animation: biometric-spin-reverse 7.6s linear infinite;
}

.login-biometric-core {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(249, 115, 22, 0.34);
    background:
        radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.28), rgba(249, 115, 22, 0.08) 58%, transparent 76%),
        transparent;
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.08),
        0 0 20px rgba(249, 115, 22, 0.16);
}

.login-biometric-scanline {
    position: absolute;
    left: 18%;
    width: 64%;
    height: 0.14rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.96), transparent);
    opacity: 0.1;
    transform: translateY(-0.72rem);
}

.login-biometric-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-biometric-icon-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.32));
}

#login-form .login-biometric-btn[data-state="ready"] .login-biometric-core {
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.1),
        0 0 28px rgba(249, 115, 22, 0.2);
}

#login-form .login-biometric-btn[data-state="scanning"] .login-biometric-orbit-a {
    animation-duration: 2.6s;
}

#login-form .login-biometric-btn[data-state="scanning"] .login-biometric-orbit-b {
    animation-duration: 3.4s;
}

#login-form .login-biometric-btn[data-state="scanning"] .login-biometric-scanline {
    opacity: 1;
    animation: biometric-scan 1.2s ease-in-out infinite;
}

#login-form .login-biometric-btn[data-state="success"] {
    color: rgba(34, 197, 94, 0.92);
}

#login-form .login-biometric-btn[data-state="success"] .login-biometric-core,
#login-form .login-biometric-btn[data-state="success"] .login-biometric-icon {
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.12),
        0 0 28px rgba(34, 197, 94, 0.24);
}

#login-form .login-biometric-btn[data-state="error"] {
    color: rgba(239, 68, 68, 0.92);
}

#login-form .login-biometric-btn[data-state="locked"] .login-biometric-shell {
    opacity: 0.68;
}

#login-form .login-biometric-btn:disabled {
    cursor: not-allowed;
    transform: none;
}

#login-biometric-status {
    display: none;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 18rem;
    margin-inline: auto;
}

@keyframes biometric-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes biometric-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes biometric-scan {
    0%,
    100% {
        transform: translateY(-1rem);
    }

    50% {
        transform: translateY(1rem);
    }
}

#login-form button:hover {
    background-color: var(--brand-primary-hover);
    transform: translateY(-2px);
}

#main-app {
    min-height: 100vh;
    position: relative;
}

#sidebar {
    width: var(--sidebar-width);
    background: rgba(17, 24, 39, 0.95);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1rem;
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-110%);
    transition: transform 0.3s ease;
    z-index: 2200;
    overflow-y: auto;
}

body.sidebar-visible #sidebar {
    transform: translateX(0);
}

body.sidebar-visible::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 2100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.sidebar-brand img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(15, 23, 42, 0.8);
    padding: 4px;
}

.sidebar-brand strong {
    display: block;
    color: var(--text-light);
    font-size: 1rem;
}

#sidebar nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.95rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover {
    color: var(--text-light);
    background-color: rgba(148, 163, 184, 0.08);
}

.nav-link.active {
    color: var(--text-light);
    background-color: rgba(249, 115, 22, 0.14);
}

.nav-link .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    transition: inherit;
}

.nav-link.active .nav-icon {
    background: rgba(249, 115, 22, 0.2);
    color: var(--brand-primary);
}

.nav-link .nav-icon svg {
    width: 22px;
    height: 22px;
}

.nav-link .nav-label {
    flex: 1;
}

#main-content {
    width: 100%;
    padding: 1.5rem 1.5rem 80px 1.5rem;
    overflow-y: auto;
}

#dashboard-view {
    color: var(--text-light);
}

/* ── Dashboard v2 (db2) — sin scroll, KPIs visibles de un vistazo ──────── */
.db2-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
}
.db2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.db2-title-block h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.db2-updated { font-size: 0.72rem; color: var(--text-muted, #888); }
.db2-topbar-actions { display: flex; gap: 0.5rem; align-items: center; }
.db2-zona-select { font-size: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid var(--border-color, #ddd); background: var(--surface, #fff); }

/* KPI Strip */
.db2-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    flex-shrink: 0;
}
@media (max-width: 900px) { .db2-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .db2-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.db2-kpi-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border-left: 1px solid transparent;
}
.db2-kpi-icon { font-size: 1.4rem; flex-shrink: 0; opacity: 0.85; }
.db2-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.db2-kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.db2-kpi-label { font-size: 0.68rem; color: var(--text-muted, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db2-kpi-blue   { background: #e8f4fd; border-color: #2196f3; color: #1565c0; }
.db2-kpi-orange { background: #fdf8ec; border-color: #d9a62e; color: #9c4453; }
.db2-kpi-red    { background: #fdecea; border-color: #f44336; color: #c62828; }
.db2-kpi-yellow { background: #fdf8ec; border-color: #d9a62e; color: #d9a62e; }
.db2-kpi-green  { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.db2-kpi-purple { background: #f3e5f5; border-color: #9c27b0; color: #6a1b9a; }

/* Main grid */
.db2-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}
@media (max-width: 760px) { .db2-main-grid { grid-template-columns: 1fr; } }

/* Cards */
.db2-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #efe9e3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.db2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border-color, #efe9e3);
    flex-shrink: 0;
}
.db2-card-title { font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.db2-select-sm { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 5px; border: 1px solid var(--border-color, #ddd); background: var(--surface, #fff); }
.db2-badge-count { background: var(--primary, #4a1420); color: #fff; border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 700; }

/* Horas barras horizontales */
.db2-hours-body { flex: 1; overflow-y: auto; padding: 0.6rem 0.9rem; }
.db2-hours-bars { display: flex; flex-direction: column; gap: 0.45rem; }
.db2-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.db2-bar-name { width: 120px; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.db2-bar-track { flex: 1; background: var(--border-color, #eee); border-radius: 4px; height: 14px; overflow: hidden; }
.db2-bar-fill { height: 100%; border-radius: 4px; background: var(--primary, #4a1420); transition: transform 0.4s; }
.db2-bar-fill.db2-bar-top { background: #2196f3; }
.db2-bar-val { width: 42px; text-align: right; color: var(--text-muted, #888); font-size: 0.72rem; }

/* Cola OT */
.db2-ot-body { flex: 1; overflow-y: auto; }
.db2-ot-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.db2-ot-table th { position: sticky; top: 0; background: var(--surface, #fff); padding: 0.4rem 0.6rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border-color, #efe9e3); white-space: nowrap; }
.db2-ot-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border-color, #f8f5f2); vertical-align: middle; }
.db2-ot-table tr:last-child td { border-bottom: none; }
.db2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.db2-dot-ok     { background: #4caf50; }
.db2-dot-warn   { background: #d9a62e; }
.db2-dot-alert  { background: #f44336; }
.db2-dot-muted  { background: #a89686; }
.db2-empty { text-align: center; color: var(--text-muted, #888); font-size: 0.8rem; padding: 1.5rem; }

/* Bottom strip */
.db2-bottom-strip {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0.75rem;
    flex-shrink: 0;
    max-height: 160px;
}
@media (max-width: 760px) { .db2-bottom-strip { grid-template-columns: 1fr; max-height: none; } }
.db2-chart-wrap { flex: 1; padding: 0.4rem 0.9rem 0.6rem; }
.db2-chart-wrap canvas { height: 110px !important; }
.db2-gerencia-body { flex: 1; overflow-y: auto; padding: 0.5rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; }

/* ── Dashboard v3 — 7 bloques ──────────────────────────────────────────── */
.db3-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: #f8f5f2;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

/* Topbar */
.db3-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.db3-title { font-size: 1.1rem; font-weight: 700; }
.db3-subtitle { font-size: 0.72rem; color: #888780; display: block; }
.db3-controls { display: flex; gap: 8px; align-items: center; }
.db3-select { font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; border: 1px solid #ddd; background: #fff; }

/* KPI Strip */
.db3-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 900px) { .db3-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .db3-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* Base card (spec) */
.kpi-card {
    background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 12px 14px;
}
.db3-kpi-val { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.db3-kpi-lbl { font-size: 0.68rem; color: #888780; }
.kpi-card > i { font-size: 1.3rem; float: left; margin-right: 10px; margin-top: 4px; }

/* Alertas */
.db3-alertas-row { display: flex; flex-direction: column; gap: 6px; }
.alert-card-red {
    background: #FCEBEB; border: 0.5px solid #F09595; border-radius: 8px;
    padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px;
}
.alert-card-amber {
    background: #faf1da; border: 0.5px solid #d9a62e; border-radius: 8px;
    padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px;
}
.alert-card-red i, .alert-card-amber i { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert-card-red .alert-badge {
    background: #A32D2D; color: #fff; font-size: 0.7rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.alert-card-amber .alert-badge {
    background: #7a5810; color: #fff; font-size: 0.7rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}

/* Grids */
.db3-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.db3-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .db3-two-col { grid-template-columns: 1fr; } .db3-three-col { grid-template-columns: 1fr; } }

/* Panel generico */
.db3-panel { min-height: 160px; }

/* Section label (spec) */
.section-label {
    font-size: 11px; font-weight: 500; color: #888780;
    letter-spacing: 0.05em; display: flex; align-items: center;
    gap: 6px; margin-bottom: 8px;
}
.section-label::after { content: ''; flex: 1; height: 0.5px; background: rgba(0,0,0,0.1); }

/* Barras horizontales genéricas */
.db3-bars-list { display: flex; flex-direction: column; gap: 6px; }
.db3-bar-row { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
.db3-bar-name { width: 110px; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bar-track { flex: 1; height: 8px; background: #F1EFE8; border-radius: 4px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 4px; transition: transform 0.4s ease; }
.db3-bar-val { width: 52px; text-align: right; color: #888780; font-size: 0.71rem; }

/* Pills (spec) */
.pill         { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 500; }
.pill-red     { background: #FCEBEB; color: #A32D2D; }
.pill-amber   { background: #faf1da; color: #7a5810; }
.pill-green   { background: #EAF3DE; color: #3B6D11; }
.pill-blue    { background: #E6F1FB; color: #185FA5; }

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, #efe9e3 25%, #f8f5f2 50%, #efe9e3 75%);
    background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Funnel */
.db3-funnel { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.db3-funnel-step {
    flex: 1; min-width: 60px; padding: 8px 6px; border-radius: 8px;
    text-align: center; font-size: 0.72rem;
}
.db3-funnel-step strong { display: block; font-size: 1.1rem; }
.db3-funnel-arrow { font-size: 0.8rem; color: #888780; flex-shrink: 0; }
.db3-funnel-pct { display: block; font-size: 0.65rem; color: #888780; margin-top: 2px; }

/* Tabla cartera */
.db3-table-wrap { overflow-y: auto; max-height: 200px; }
.db3-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.db3-table th { position: sticky; top: 0; background: #fff; padding: 4px 6px; font-weight: 600; border-bottom: 2px solid #eee; white-space: nowrap; text-align: left; }
.db3-table td { padding: 4px 6px; border-bottom: 1px solid #f8f5f2; vertical-align: middle; }
.db3-table tr:last-child td { border-bottom: none; }

/* Donut */
.db3-donut-wrap { display: flex; gap: 12px; align-items: center; }
.db3-donut-wrap canvas { width: 100px !important; height: 100px !important; flex-shrink: 0; }
.db3-donut-legend { display: flex; flex-direction: column; gap: 4px; font-size: 0.73rem; }
.db3-legend-item { display: flex; align-items: center; gap: 5px; }
.db3-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* Chart wrap */
.db3-chart-wrap { height: 130px; position: relative; }
.db3-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ── Facturacion v2 ────────────────────────────────────────────────────── */
/* ── MÓDULO LEGALIZACIÓN ─────────────────────────────────────────────────── */
.leg-shell { display:flex; flex-direction:column; gap:14px; padding:16px; background:#fdfbf9; overflow-y:auto; height:100%; box-sizing:border-box; }
.leg-topbar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.leg-title { font-size:1.15rem; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; }
.leg-subtitle { font-size:0.73rem; color:#8a7767; margin:3px 0 0; }
.leg-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex-shrink:0; }
@media (max-width:700px) { .leg-kpis { grid-template-columns:repeat(2,1fr); } }
.leg-kpi-card { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #efe9e3; border-radius:10px; padding:10px 14px; }
.leg-kpi-val { font-size:1.35rem; font-weight:800; color:#45141e; }
.leg-kpi-lbl { font-size:0.68rem; color:#8a7767; text-transform:uppercase; letter-spacing:.04em; }
.leg-filters-bar { display:flex; gap:6px; flex-shrink:0; }
.leg-filter-btn { padding:6px 16px; border-radius:20px; border:1.5px solid #efe9e3; background:#fff; font-size:.82rem; font-weight:600; cursor:pointer; color:#4a3c31; transition:all .15s; }
.leg-filter-btn.leg-filter-active, .leg-filter-btn:hover { background:#4a1420; border-color:#4a1420; color:#fff; }
.leg-list { display:flex; flex-direction:column; gap:12px; }
.leg-empty { text-align:center; padding:48px 20px; color:#a89686; display:flex; flex-direction:column; align-items:center; gap:10px; }
/* Cards */
.leg-card { background:#fff; border:1px solid #efe9e3; border-radius:12px; padding:16px; transition:box-shadow .15s; }
.leg-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.07); }
.leg-card-sent { border-left: 1px solid #059669; }
.leg-card:not(.leg-card-sent) { border-left: 1px solid #4a1420; }
.leg-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.leg-card-head-left { display:flex; align-items:center; gap:8px; }
.leg-card-num { font-size:.75rem; font-weight:700; color:#8a7767; font-family:monospace; background:#f8f5f2; border-radius:4px; padding:2px 6px; }
.leg-status-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:.7rem; font-weight:700; text-transform:uppercase; }
.leg-chip-pending { background:#fdf8ec; color:#4a1420; }
.leg-chip-sent    { background:#ecfdf5; color:#059669; }
.leg-card-total { font-size:1.1rem; font-weight:800; color:#45141e; }
.leg-card-title { font-size:.95rem; font-weight:700; margin:4px 0 8px; color:#45141e; line-height:1.3; }
.leg-card-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#8a7767; margin-bottom:12px; }
.leg-card-meta span { display:flex; align-items:center; gap:4px; }
.leg-card-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.leg-doc-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:7px; border:1.5px solid #e2d9d1; background:#fdfbf9; font-size:.78rem; font-weight:600; color:#4a3c31; cursor:pointer; text-decoration:none; transition:all .15s; }
.leg-doc-btn:hover { border-color:#4a1420; color:#4a1420; background:#fdf8f9; }
.leg-doc-missing { font-size:.75rem; color:#a89686; font-style:italic; }
.leg-prepare-btn { display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:7px 18px; border-radius:8px; border:none; background:#4a1420; color:#fff; font-size:.82rem; font-weight:700; cursor:pointer; transition:background .15s; }
.leg-prepare-btn:hover { background:#73202f; }
/* Checklist de documentos (filtro Pendiente) */
.leg-doc-checklist { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 4px; border-top:1px solid #f1f5f9; }
.leg-doc-ck { display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:999px; }
.leg-doc-ck-ok   { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.leg-doc-ck-fail { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
/* Modal correo */
.leg-modal-overlay { position:fixed; inset:0; z-index:1100; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; }
.leg-modal-box { background:#fff; border-radius:14px; width:100%; max-width:680px; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
.leg-modal-header { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid #efe9e3; flex-shrink:0; }
.leg-modal-title { font-size:1rem; font-weight:700; margin:0 0 2px; display:flex; align-items:center; gap:8px; }
.leg-modal-hint { font-size:.73rem; color:#8a7767; margin:0; }
.leg-modal-close { border:none; background:none; cursor:pointer; font-size:1.2rem; color:#8a7767; padding:4px; line-height:1; }
.leg-modal-body { padding:16px 20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:12px; }
.leg-email-field { display:flex; flex-direction:column; gap:4px; }
.leg-email-label { font-size:.75rem; font-weight:700; color:#4a3c31; text-transform:uppercase; letter-spacing:.04em; }
.leg-email-input { border:1.5px solid #efe9e3; border-radius:7px; padding:8px 10px; font-size:.85rem; color:#45141e; width:100%; box-sizing:border-box; }
.leg-email-input:focus { border-color:#4a1420; outline:none; }
.leg-email-textarea { border:1.5px solid #efe9e3; border-radius:7px; padding:8px 10px; font-size:.83rem; color:#45141e; width:100%; box-sizing:border-box; resize:vertical; font-family:inherit; line-height:1.5; }
.leg-email-textarea:focus { border-color:#4a1420; outline:none; }
.leg-docs-section { background:#fdfbf9; border-radius:8px; padding:12px 14px; }
.leg-docs-title { font-size:.78rem; font-weight:700; color:#4a3c31; margin:0 0 8px; }
.leg-docs-list { display:flex; flex-wrap:wrap; gap:8px; }
.leg-doc-dl { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:7px; border:1.5px solid #e2d9d1; background:#fff; font-size:.78rem; font-weight:600; color:#4a3c31; cursor:pointer; text-decoration:none; transition:all .15s; }
.leg-doc-dl:hover { border-color:#4a1420; color:#4a1420; }
.leg-modal-footer { display:flex; align-items:center; gap:8px; padding:14px 20px; border-top:1px solid #efe9e3; flex-shrink:0; }
.leg-gmail-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; border-radius:8px; border:none; background:#EA4335; color:#fff; font-size:.85rem; font-weight:700; cursor:pointer; transition:background .15s; }
.leg-gmail-btn:hover { background:#c5221f; }
.leg-marcar-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1.5px solid #059669; background:#ecfdf5; color:#059669; font-size:.82rem; font-weight:700; cursor:pointer; }
.leg-marcar-btn:hover { background:#d1fae5; }
/* ── END LEGALIZACIÓN ────────────────────────────────────────────────────── */
.fac-shell { display:flex; flex-direction:column; gap:12px; padding:14px 16px; background:#f8f5f2; overflow-y:auto; height:100%; box-sizing:border-box; }
.fac-topbar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.fac-title { font-size:1.1rem; font-weight:700; margin:0; }
.fac-subtitle { font-size:0.73rem; color:#888780; margin:2px 0 0; }
.fac-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex-shrink:0; }
@media (max-width:700px) { .fac-kpis { grid-template-columns:repeat(2,1fr); } }
.fac-kpi { display:flex; align-items:center; gap:10px; }
.fac-kpi > i { font-size:1.3rem; flex-shrink:0; }
.fac-kpi-val { font-size:1.2rem; font-weight:700; line-height:1.1; }
.fac-main { display:grid; grid-template-columns:1fr; gap:12px; }
.fac-table-card { background:#fff; border:0.5px solid rgba(0,0,0,0.1); border-radius:12px; overflow:hidden; }
.fac-table-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #f8f5f2; gap:10px; flex-wrap:wrap; }
.fac-table-filters { display:flex; gap:4px; }
.fac-filter-btn { font-size:0.75rem; padding:3px 10px; border-radius:6px; border:1px solid #ddd; background:#fff; cursor:pointer; color:#555; }
.fac-filter-btn.fac-filter-active { background:var(--primary,#4a1420); color:#fff; border-color:var(--primary,#4a1420); }
.fac-table-wrap { overflow-x:auto; max-height:400px; overflow-y:auto; }
.fac-form-card { background:#fff; border:0.5px solid rgba(0,0,0,0.1); border-radius:12px; padding:14px; }
.fac-form-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fac-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px) { .fac-form-grid { grid-template-columns:1fr; } }
.fac-action-btn { font-size:0.72rem; padding:3px 8px; border-radius:5px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.fac-action-btn:hover { background:#f8f5f2; }

/* ── Dashboard v1 legacy (mantener compatibilidad) ─────────────────────── */
.dashboard-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.dashboard-kpi-item {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.92));
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-kpi-item.dashboard-kpi-alert {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(15, 23, 42, 0.92));
}

.dashboard-kpi-item.dashboard-kpi-alert strong {
    color: var(--danger-color);
}

.dashboard-kpi-item strong {
    color: var(--text-light);
    font-size: 0.96rem;
}

.dashboard-kpi-item small,
.dashboard-chart-caption {
    color: var(--text-muted);
    line-height: 1.45;
}

.dashboard-kpi-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
}

.dashboard-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(14, 116, 144, 0.12));
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.dashboard-intro h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.dashboard-intro p {
    margin: 0.35rem 0 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

#dashboard-refresh-btn {
    border-radius: 999px;
    padding: 0.65rem 1.4rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--text-light);
    background: rgba(15, 23, 42, 0.35);
    transition: all 0.2s ease;
}

#dashboard-refresh-btn:hover,
#dashboard-refresh-btn:focus-visible {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.35);
    cursor: pointer;
}

.dashboard-metrics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-metric-card {
    background: rgba(24, 32, 53, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.2rem;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-height: 128px;
    position: relative;
    overflow: hidden;
}

.dashboard-metric-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, transparent 70%);
    z-index: 0;
}

.dashboard-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.dashboard-metric-label {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.9);
    font-weight: 600;
}

.dashboard-metric-card strong {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    z-index: 1;
}

.dashboard-metric-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    z-index: 1;
}

.dashboard-analytics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dashboard-card {
    background: rgba(17, 24, 39, 0.88);
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

.dashboard-card-header {
    padding: 1.1rem 1.25rem 0.6rem 1.25rem;
}

.dashboard-card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
}

.dashboard-card-body {
    flex: 1;
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.dashboard-card .dashboard-card-body canvas {
    max-height: 220px;
}

.dashboard-card-gauge .dashboard-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dashboard-gauge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.dashboard-gauge {
    --gauge-value: 0%;
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--brand-primary) var(--gauge-value), rgba(148, 163, 184, 0.14) var(--gauge-value));
    position: relative;
    display: grid;
    place-items: center;
}

.dashboard-gauge::before {
    content: "";
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.92);
}

.dashboard-gauge-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-light);
}

.dashboard-gauge-inner span {
    font-size: 2rem;
    font-weight: 700;
}

.dashboard-gauge-inner small {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dashboard-gauge-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.dashboard-gauge-meta p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.dashboard-gauge-meta strong {
    display: block;
    text-align: center;
    margin-top: 0.3rem;
    font-size: 1.35rem;
}

.dashboard-bottom-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

.dashboard-card-tasks {
    grid-column: span 2;
    min-height: 220px;
}

@media (max-width: 1024px) {
    .dashboard-card-tasks {
        grid-column: span 1;
    }
}

.dashboard-top-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.dashboard-top-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    border-radius: 1rem;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.dashboard-top-item-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.dashboard-top-item-rank {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--text-light);
}

.dashboard-rank-1 {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.7), rgba(249, 115, 22, 0.5));
}

.dashboard-rank-2 {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.4), rgba(99, 102, 241, 0.35));
}

.dashboard-rank-3 {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(34, 197, 94, 0.3));
}

.dashboard-top-item-details span {
    display: block;
}

.dashboard-top-item-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.dashboard-top-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dashboard-top-item-score {
    min-width: 72px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-light);
}

.dashboard-table-wrapper {
    overflow-x: auto;
    max-height: 235px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.9rem;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.dashboard-table thead tr {
    text-align: left;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.dashboard-table thead {
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.96);
    z-index: 1;
}

.dashboard-table th,
.dashboard-table td {
    padding: 0.62rem 0.7rem;
    border-bottom: 1px solid rgba(71, 85, 105, 0.35);
    white-space: nowrap;
}

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

.dashboard-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dashboard-card-tasks .dashboard-card-body {
    padding-top: 0.15rem;
}

.dashboard-card-span-2 {
    grid-column: span 2;
}

.dashboard-card-tech-hours {
    min-height: 520px;
}

.dashboard-tech-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-tech-period,
.dashboard-tech-search {
    font: inherit;
    color: var(--text-light);
    background: rgba(30, 41, 59, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.8rem;
    outline: none;
}

.dashboard-tech-period {
    min-width: 144px;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
}

.dashboard-tech-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    min-height: 0;
}

.dashboard-tech-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1rem;
    padding: 0.95rem;
    min-height: 0;
}

.dashboard-tech-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dashboard-tech-label,
.dashboard-tech-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dashboard-tech-search {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
}

.dashboard-tech-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    background: rgba(30, 41, 59, 0.75);
    border-radius: 0.9rem;
    padding: 0.25rem;
}

.dashboard-tech-tab {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.42rem 0.55rem;
    border-radius: 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.dashboard-tech-tab.active {
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-light);
}

.dashboard-tech-list {
    flex: 1;
    overflow-y: auto;
    min-height: 220px;
    padding-right: 0.2rem;
}

.dashboard-tech-zone {
    margin-bottom: 0.5rem;
}

.dashboard-tech-zone-header {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    text-align: left;
}

.dashboard-tech-zone-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
}

.dashboard-tech-zone-badge,
.dashboard-tech-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-tech-zone-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1.3rem;
}

.dashboard-tech-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.35rem;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dashboard-tech-item:hover,
.dashboard-tech-item.is-selected {
    background: rgba(30, 41, 59, 0.72);
}

.dashboard-tech-item input {
    accent-color: var(--brand-primary);
}

.dashboard-tech-item-nested {
    padding-left: 0;
}

.dashboard-tech-color,
.dashboard-tech-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dashboard-tech-name {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.dashboard-tech-item.is-selected .dashboard-tech-name {
    color: var(--text-light);
    font-weight: 600;
}

.dashboard-tech-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
}

.dashboard-tech-actions .btn {
    padding: 0.42rem 0.55rem;
    font-size: 0.74rem;
}

.dashboard-tech-main {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.dashboard-tech-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-tech-stat {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.dashboard-tech-stat strong {
    color: var(--text-light);
    font-size: 1.45rem;
    line-height: 1.1;
}

.dashboard-tech-stat small {
    color: var(--text-muted);
}

.dashboard-tech-chart-card {
    flex: 1;
    min-height: 0;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1.1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dashboard-tech-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-tech-chart-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
}

.dashboard-tech-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.dashboard-tech-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.dashboard-tech-chart-wrap {
    position: relative;
    flex: 1;
    min-height: 280px;
}

.dashboard-tech-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.3);
    border-radius: 0.8rem;
}

.dashboard-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-priority-high {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.dashboard-priority-medium {
    background: rgba(234, 179, 8, 0.18);
    color: #eed08f;
}

.dashboard-priority-low {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.dashboard-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-status-pending {
    background: rgba(148, 163, 184, 0.18);
    color: #e2d9d1;
}

.dashboard-status-progress {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

.dashboard-status-closed {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.dashboard-status-cancelled {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}

.dashboard-status-viewed {
    background: rgba(249, 115, 22, 0.18);
    color: #eed08f;
}

@media (max-width: 900px) {
    .dashboard-card-span-2 {
        grid-column: span 1;
    }

    .dashboard-tech-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-tech-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-tech-chart-header {
        flex-direction: column;
    }

    .dashboard-tech-legend {
        justify-content: flex-start;
    }

    .dashboard-card-gauge .dashboard-card-body {
        padding-top: 1.5rem;
    }

    .dashboard-gauge-meta {
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .dashboard-wrapper {
        gap: 0.8rem;
    }

    .dashboard-metrics-grid,
    .dashboard-analytics-grid,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-tech-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-metric-card {
        min-height: auto;
    }

    .dashboard-card-header,
    .dashboard-card-body {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .dashboard-table thead {
        display: none;
    }

    .dashboard-table,
    .dashboard-table tbody,
    .dashboard-table tr,
    .dashboard-table td {
        display: block;
        width: 100%;
    }

    .dashboard-table tbody tr {
        background: rgba(30, 41, 59, 0.45);
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 0.85rem;
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.7rem;
    }

    .dashboard-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 0;
        border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    }

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

    .dashboard-table td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 600;
    }

    .dashboard-intro {
        flex-direction: column;
        align-items: flex-start;
    }

    #dashboard-refresh-btn {
        width: 100%;
        text-align: center;
    }

    .dashboard-gauge {
        width: 150px;
    }
}

#bottom-nav {
    position: fixed;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 820px;
    height: auto;
    padding: 6px 10px 6px;
    background: #241c17;
    border: 1.5px solid rgba(255,91,31,0.45);
    border-radius: 18px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.38), 0 1px 6px rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    gap: 2px;
}

/* Grupo de items de nav */
#bottom-nav .nav-items-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255,255,255,0.45);
    background: transparent;
    border: none;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 10.5px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}

.nav-button i {
    font-size: 22px;
    line-height: 1;
    transition: color 0.18s;
}

.nav-button:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
}

.nav-button.active {
    background: transparent;
    color: #4a1420;
}

.nav-button.active i {
    color: #4a1420;
}

.nav-button-logout {
    flex-shrink: 0;
    color: rgba(255,255,255,0.35);
}

.nav-button-logout:hover {
    background: rgba(220,53,69,0.18) !important;
    color: #ff6b7a !important;
}

.nav-button-logout:hover i {
    color: #ff6b7a !important;
}

/* Badge de fecha/hora */
.nav-date-badge {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.10);
    padding: 4px 9px;
    border-radius: 8px;
    border: 0.5px solid rgba(255,255,255,0.12);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Separador vertical */
.nav-divider-line {
    width: 0.5px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
    margin: 0 4px;
}

.nav-button-add {
    position: absolute;
    top: -22px;
    width: 56px;
    height: 56px;
    background: var(--brand-primary);
    color: white;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px -12px rgba(249, 115, 22, 0.6);
}

.nav-button-add svg {
    width: 28px;
    height: 28px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.95rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover {
    color: var(--text-light);
    background-color: rgba(148, 163, 184, 0.08);
}

.nav-link.active {
    color: var(--text-light);
    background-color: rgba(249, 115, 22, 0.14);
}

.nav-link .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.12);
    color: inherit;
    transition: inherit;
}

.nav-link.active .nav-icon {
    background: rgba(249, 115, 22, 0.2);
    color: var(--brand-primary);
}

.nav-link .nav-icon svg {
    width: 20px;
    height: 20px;
}

.nav-link .nav-label {
    flex: 1;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-header-compact {
    margin: 0.5rem 0 0.75rem;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.section-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.section-header h2 {
    margin: 0;
}

.section-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.header-actions {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
}

.notification-wrapper {
    position: relative;
}

.notification-btn {
    position: relative;
    background: rgba(26, 35, 50, 0.85);
}

.notification-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.notification-count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background: var(--danger-color);
    color: #fff;
    border-radius: 999px;
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

.notification-count.hidden {
    display: none;
}

.notifications-panel {
    position: absolute;
    top: 2.8rem;
    right: 0;
    width: 320px;
    max-height: 420px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    z-index: 50;
}

.notifications-panel.hidden {
    display: none;
}

.notification-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #efe9e3;
    border-left: 1px solid #4a1420;
}

.notification-item strong {
    color: #32141a;
    font-size: 0.82rem;
    font-weight: 600;
}

.notification-item span {
    color: #6b5a4c;
    font-size: 0.77rem;
    line-height: 1.45;
}

.notifications-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 0.75rem 0;
    font-size: 0.85rem;
}

.btn-icon {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.reports-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reports-status-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.reports-status-filter {
    flex: 1;
    text-align: center;
}

.reports-status-filter {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.48rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reports-status-filter:hover,
.reports-status-filter:focus-visible {
    color: var(--text-light);
    border-color: rgba(249, 115, 22, 0.42);
}

.reports-status-filter.active {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.36);
    color: #eed08f;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.14) inset;
}

.reports-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1.3rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(12, 21, 38, 0.96), rgba(15, 23, 42, 0.9));
}

.reports-hero-copy h3 {
    margin: 0;
}

.reports-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.report-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background:
        linear-gradient(180deg, rgba(13, 23, 40, 0.98), rgba(17, 27, 43, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.report-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
}

.report-card-heading {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.report-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
}

.report-card-kicker::before {
    content: "";
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 999px;
    background: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.report-card-info {
    min-width: 0;
    overflow: hidden;
}

.report-card-info h4 {
    margin: 0;
    font-size: 1rem;
    font-family: var(--mgm-sans);
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.report-card-info p {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.report-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.report-card-badge,
.report-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.36rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.72);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.report-card-status.status-abierto {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.28);
}

.report-card-status.status-en-progreso {
    color: #eed08f;
    background: rgba(250, 204, 21, 0.14);
    border-color: rgba(250, 204, 21, 0.28);
}

.report-card-status.status-cerrado {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.28);
}

.report-card-status.status-cancelado {
    color: #e2d9d1;
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.24);
}

.report-card-badge.priority-baja {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.report-card-badge.priority-media {
    color: #eed08f;
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.28);
}

.report-card-badge.priority-alta {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

.report-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.report-card-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.72rem 0.8rem;
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.report-card-meta-item span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.78);
}

.report-card-meta-item strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-light);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.report-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

@media (max-width: 720px) {
    .reports-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .reports-hero .btn {
        width: 100%;
    }

    .reports-status-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-card-meta {
        grid-template-columns: 1fr;
    }

    .report-card-header {
        flex-direction: column;
    }

    .report-card-badges {
        justify-content: flex-start;
    }
}

.report-card-actions-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.report-card-actions-btn svg {
    width: 20px;
    height: 20px;
}

.actions-menu {
    position: absolute;
    top: 50px;
    right: 20px;
    background: #4a3c31;
    border-radius: 0.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    z-index: 10;
    overflow: hidden;
}

.actions-menu button {
    background: none;
    border: none;
    color: var(--text-light);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.actions-menu button:hover {
    background: var(--brand-primary);
}

.actions-menu button svg {
    width: 18px;
    height: 18px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    z-index: 9999;
    transition: opacity 0.3s;
}

.modal-content {
    background: var(--bg-dark-accent);
    width: min(900px, calc(100% - 2rem));
    height: 95vh;
    max-height: 95vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.modal-overlay.visible .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
}

.modal-close-btn {
    margin-left: auto;
    cursor: pointer;
}

.modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    padding-bottom: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--bg-dark-accent);
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.35);
    position: sticky;
    bottom: 0;
}

#task-report-link-modal .modal-content {
    width: min(560px, calc(100% - 1.1rem));
    height: auto;
    max-height: 88vh;
}

.task-report-help {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.task-report-help strong {
    color: var(--text-light);
}

#task-report-link-select {
    width: 100%;
    padding: 0.72rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid #d1cec6;
    background: #ffffff;
    color: #241c17;
    font-size: 0.9rem;
}

#task-report-link-select:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.task-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: flex-end;
}

#report-form,
#safety-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.report-modal-content {
    width: min(1024px, calc(100% - 1.5rem));
    background: linear-gradient(180deg, rgba(9, 16, 30, 0.98), rgba(12, 21, 38, 0.96));
    font-family: var(--mgm-sans);
}

.report-modal-header {
    padding-bottom: 1rem;
    gap: 1rem;
}

.report-modal-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.report-modal-heading h3 {
    margin: 0;
    font-family: var(--mgm-sans);
    letter-spacing: -0.02em;
}

.report-modal-heading .muted-text {
    display: block;
    margin-top: 0.28rem;
    max-width: 34rem;
}

.report-order-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.38rem 0.9rem;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.32);
    color: var(--brand-primary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-progress-wrap {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.report-progress-step {
    flex: 1;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.report-progress-step.is-done {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.9), rgba(251, 146, 60, 0.8));
}

.report-progress-step.is-active {
    background: rgba(249, 115, 22, 0.42);
}

.report-builder-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.report-builder-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    min-height: 0;
    overflow-y: auto;
}

.report-builder-section,
.report-received-card {
    background: rgba(15, 23, 42, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    overflow: hidden;
    flex: 0 0 auto;
}

.report-builder-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.report-builder-section-head h4 {
    margin: 0.18rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: var(--mgm-sans);
}

.report-section-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.8);
}

.report-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.75rem;
    padding: 0.32rem 0.78rem;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.24);
    color: #d9a62e;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.report-section-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.report-builder-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.report-builder-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-builder-field {
    display: flex;
    flex-direction: column;
    gap: 0.46rem;
    min-width: 0;
}

.report-builder-field-full {
    grid-column: 1 / -1;
}

.report-builder-field span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-builder-field input,
.report-builder-field select,
.report-builder-field textarea,
.report-material-row input,
.report-material-row select {
    width: 100%;
    background: rgba(30, 41, 59, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.9rem;
    padding: 0.88rem 0.98rem;
    color: var(--text-light);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.report-builder-field textarea {
    min-height: 6.25rem;
    resize: vertical;
}

.report-builder-field input:focus,
.report-builder-field select:focus,
.report-builder-field textarea:focus,
.report-material-row input:focus,
.report-material-row select:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.65);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
}

.report-inline-actions {
    display: flex;
    align-items: stretch;
    gap: 0.7rem;
}

.report-inline-actions input {
    flex: 1;
}

.report-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.report-chip {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.76);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.66rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-chip:hover,
.report-chip:focus-visible {
    border-color: rgba(249, 115, 22, 0.45);
    color: var(--text-light);
    outline: none;
}

.report-chip.is-selected {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.45);
    color: #f5e6c0;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.14);
}

.report-chip-success.is-selected {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.42);
    color: #86efac;
}

.report-chip-warning.is-selected {
    background: rgba(250, 204, 21, 0.16);
    border-color: rgba(250, 204, 21, 0.42);
    color: #eed08f;
}

.report-chip-danger.is-selected {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.42);
    color: #fca5a5;
}

.report-hours-group {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.report-hours-group input {
    width: 5.8rem;
    text-align: center;
}

.report-hours-group small,
.report-field-help {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.report-materials-list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding: 1rem 1rem 0.6rem;
}

.report-material-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 92px auto;
    gap: 0.7rem;
    align-items: end;
}

.report-material-row .report-builder-field {
    gap: 0.38rem;
}

.report-material-remove {
    align-self: stretch;
    min-width: 2.75rem;
    padding-inline: 0.8rem;
}

.report-add-inline-btn {
    margin: 0 1rem 1rem;
    align-self: flex-start;
}

.report-signatures {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-signature-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.report-signature-tab {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: var(--text-muted);
    border-radius: 0.9rem;
    padding: 0.8rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-signature-tab.is-active {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.45);
    color: #fff;
}

.report-signature-pane {
    display: none;
    flex-direction: column;
    gap: 0.9rem;
}

.report-signature-pane.is-active {
    display: flex;
}

.report-signature-canvas-wrap {
    border-radius: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.26);
    background: rgba(15, 23, 42, 0.72);
    overflow: hidden;
}

.report-signature-canvas-wrap.is-read-only {
    opacity: 0.92;
}

.report-signature-canvas-wrap canvas {
    width: 100%;
    height: 140px;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.report-signature-canvas-wrap.is-read-only canvas {
    cursor: default;
}

.report-signature-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.report-received-card {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.18);
}

.report-received-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.report-received-status-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.report-received-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    padding: 0.34rem 0.82rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.report-received-status.is-pending {
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.28);
    color: #eed08f;
}

.report-received-status.is-ready {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #86efac;
}

.report-argos-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 2rem;
    padding: 0.34rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: #4a1420;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(232,80,10,0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.report-argos-toggle-btn:hover,
.report-argos-toggle-btn[aria-expanded="true"] {
    background: #73202f;
    box-shadow: 0 3px 10px rgba(232,80,10,0.45);
}

.report-client-format-btn {
    align-self: flex-start;
}

.report-argos-receipt-panel {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.report-argos-receipt-panel.hidden {
    display: none;
}

.report-argos-collapsible-fields {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.report-argos-autofill-grid,
.report-argos-receiver-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.78rem;
}

.report-argos-autofill-grid {
    padding-bottom: 0.95rem;
    border-bottom: 1px solid #efe9e3;
}

.report-argos-receipt-panel .report-builder-field input[readonly],
.report-argos-receipt-panel .report-builder-field textarea[readonly] {
    color: #381018;
    background: #f8fafc;
    border-color: #e2d9d1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.report-argos-receipt-panel textarea {
    min-height: 4.4rem;
}

.report-argos-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.report-argos-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.report-argos-receipt-panel .report-signature-canvas-wrap {
    background: #ffffff;
    border-color: #e2d9d1;
}

.report-argos-signature-field {
    margin-top: 0.1rem;
}

.report-argos-receipt-panel .report-signature-canvas-wrap canvas {
    height: 156px;
}

.report-argos-mode .report-signature-tab[data-pane="cliente"] {
    display: none;
}

.report-argos-mode .report-signature-tabs {
    grid-template-columns: minmax(0, 1fr);
}

.report-argos-mode #report-signature-pane-cliente {
    display: none;
}

.report-argos-mode .report-received-card {
    border-color: rgba(249, 115, 22, 0.28);
    background: rgba(249, 115, 22, 0.08);
}

@media (max-width: 720px) {
    .report-argos-autofill-grid,
    .report-argos-receiver-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-argos-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .report-argos-download-btn {
        justify-content: center;
        width: 100%;
    }
}

.report-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #f8f5f2;
    background: #fafaf9;
    gap: 8px;
    flex-shrink: 0;
}

.report-footer-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.report-footer-cancel {
    background: none;
    border: none;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 8px;
    font-family: inherit;
    transition: background 0.15s;
}

.report-footer-cancel:hover {
    background: rgba(0,0,0,0.05);
}

.report-footer-preview {
    background: none;
    border: none;
    font-size: 13px;
    color: #5c1a28;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 8px;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(232, 93, 38, 0.3);
    transition: background 0.15s;
}

.report-footer-preview:hover {
    background: rgba(232, 93, 38, 0.07);
}

.report-footer-save {
    background: #5c1a28;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.report-footer-save svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.report-footer-save:hover {
    background: #9c4453;
}

.report-modal-content .equipment-card {
    padding: 0;
    overflow: hidden;
    background: rgba(10, 18, 34, 0.78);
}

.report-modal-content .equipment-card-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.report-modal-content .equipment-card-body {
    padding: 1rem;
}

.report-modal-content .equipment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.report-modal-content .equipment-fields-report {
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.report-modal-content .equipment-fields-row-compact {
    display: grid;
    grid-template-columns: minmax(180px, 0.95fr) minmax(220px, 1.2fr) minmax(180px, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.report-modal-content .equipment-field-compact {
    min-width: 0;
}

@media (max-width: 920px) {
    .report-builder-grid-two,
    .report-material-row,
    .equipment-fields-static-grid {
        grid-template-columns: 1fr;
    }

    .report-modal-content .equipment-fields {
        grid-template-columns: 1fr;
    }

    .report-modal-content .equipment-fields-row-compact {
        grid-template-columns: 1fr;
    }

    .report-inline-actions {
        flex-direction: column;
    }

    .report-modal-footer .btn-outline,
    .report-modal-footer .btn-primary {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    .report-modal-content {
        width: min(100%, calc(100% - 0.5rem));
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 1rem 1rem 0 0;
    }

    .report-progress-wrap,
    .report-builder-body,
    .report-signatures,
    .report-materials-list,
    .report-received-body {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .report-builder-section-head {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .report-add-inline-btn {
        margin-left: 0.9rem;
        margin-right: 0.9rem;
    }

    .equipment-card-header {
        align-items: flex-start;
    }
}

.btn {
    padding: 0.7rem 1.25rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #9c4453 100%);
    color: #fff;
    border: 1px solid rgba(249, 115, 22, 0.5);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

.btn:hover,
.btn:focus-visible {
    background: linear-gradient(135deg, #9c4453 0%, var(--brand-primary) 100%);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-2px);
    outline: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(249, 115, 22, 0.3);
}

/* Variante secundaria / outline */
.btn-outline {
    background: rgba(249, 115, 22, 0.08);
    color: var(--brand-primary);
    border: 1px solid rgba(249, 115, 22, 0.4);
    box-shadow: none;
}

.btn-outline::after { display: none; }

.btn-outline:hover,
.btn-outline:focus-visible {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.65);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

/* Variante ghost / neutra */
.btn-ghost {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: none;
}

.btn-ghost::after { display: none; }

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-light);
    border-color: rgba(148, 163, 184, 0.35);
    transform: translateY(-1px);
}

/* Variante peligro */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

/* Variante éxito */
.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-success:hover,
.btn-success:focus-visible {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

.card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1rem;
    padding: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

select option {
    background: #2c0c12;
    color: #f8fafc;
}

.profile-form {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.45);
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.85rem;
    margin-bottom: 1rem;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.simple-table th,
.simple-table td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    text-align: left;
    font-size: 0.88rem;
}

.simple-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    background: rgba(15, 23, 42, 0.7);
}

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

.btn-sm {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
}

.muted-text {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.badge-success {
    color: #86efac;
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.35);
}

.badge-warning {
    color: #eed08f;
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.35);
}

.badge-danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

.reportar-materiales-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.reportar-material-input {
    width: 100%;
}

.time-map-card {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.45);
    position: relative;
}

.time-map-tile-toggle {
    position: absolute;
    bottom: calc(0.75rem + 10px);
    right: calc(0.75rem + 10px);
    z-index: 1000;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    color: #35131a;
    transition: background 0.15s;
}

.time-map-tile-toggle:hover {
    background: rgba(255,255,255,1);
}

.time-control-map {
    width: 100%;
    height: clamp(240px, 42vh, 360px);
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
    background: #eef3f8;
    touch-action: pan-y !important;
    position: relative;
    z-index: 1;
}

.time-control-map.leaflet-container {
    touch-action: pan-y !important;
    z-index: 1;
}

.time-control-map .leaflet-top,
.time-control-map .leaflet-bottom,
.time-control-map .leaflet-control {
    pointer-events: none !important;
}

body.sidebar-visible .time-control-map,
body.sidebar-visible .time-control-map .leaflet-container,
body.sidebar-visible .time-control-map .leaflet-pane,
body.sidebar-visible .time-control-map .leaflet-control {
    pointer-events: none !important;
}

#time-control-geofence-status {
    margin-top: 0.6rem;
    font-weight: 600;
}

.time-control-top-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.time-control-top-actions .btn {
    min-width: 8.4rem;
    min-height: 2.9rem;
    border-radius: 999px;
    font-weight: 700;
    border-color: rgba(249, 115, 22, 0.28);
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.92), rgba(51, 65, 85, 0.68));
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.time-control-top-actions .btn:hover,
.time-control-top-actions .btn:focus-visible {
    border-color: rgba(249, 115, 22, 0.52);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(51, 65, 85, 0.86));
}

.time-main-action {
    margin: 1rem 0 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.time-main-button {
    width: 100%;
    min-height: 3.4rem;
    border-radius: 0.95rem;
    font-size: 1.02rem;
    font-weight: 700;
}

#time-next-action-status {
    display: block;
}

#time-history-modal .modal-content {
    width: min(1100px, calc(100% - 2rem));
    height: min(88vh, 760px);
    max-height: 88vh;
}

@media (max-width: 760px) {
    .time-control-top-actions {
        width: 100%;
        justify-content: stretch;
        gap: 0.7rem;
    }

    .time-control-top-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .time-main-button {
        font-size: 0.96rem;
    }
}

.equipment-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipment-empty-icon {
    font-size: 2rem;
    opacity: 0.6;
}

.equipment-card {
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.equipment-card+.equipment-card {
    margin-top: 1rem;
}

.equipment-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

.equipment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equipment-card-title-stack {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.equipment-card-title {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.equipment-severity-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0.24rem 0.72rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.equipment-severity-baja {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.equipment-severity-media {
    background: rgba(250, 204, 21, 0.15);
    color: #eed08f;
    border: 1px solid rgba(250, 204, 21, 0.28);
}

.equipment-severity-alta,
.equipment-severity-critica {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.32);
}

.equipment-remove-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--danger-color);
    border-radius: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.equipment-remove-btn:hover {
    background: var(--danger-color);
    color: #fff;
}

.equipment-card-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.equipment-card .equipment-gallery,
.equipment-card .equipment-detail-gallery {
    margin-top: 0.5rem;
}

.equipment-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.equipment-field-full {
    width: 100%;
}

.equipment-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipment-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.equipment-input,
.equipment-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    color: var(--text-light);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
    min-height: 48px;
}

.equipment-select {
    appearance: none;
}

.equipment-textarea {
    min-height: 110px;
}

.equipment-textarea-compact {
    min-height: 84px;
}

.equipment-input:focus,
.equipment-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.equipment-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.equipment-photo {
    position: relative;
    display: block;
    border: 2px dashed rgba(148, 163, 184, 0.3);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(26, 35, 50, 0.65);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.equipment-photo input[type="file"] {
    display: none;
}

.equipment-photo-inner {
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 210px;
}

.equipment-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.equipment-photo-label {
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.equipment-photo-icon {
    font-size: 1.5rem;
    color: var(--brand-primary);
}

.equipment-photo-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.equipment-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipment-photo.has-image {
    border-style: solid;
    border-color: rgba(249, 115, 22, 0.65);
    background: rgba(249, 115, 22, 0.05);
}

.equipment-photo.has-image .equipment-photo-inner {
    padding: 0;
    min-height: auto;
}

.equipment-card-view {
    background: rgba(17, 24, 39, 0.65);
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.18);
    cursor: default;
    transform: none !important;
}

.equipment-card-view:hover {
    border-color: rgba(148, 163, 184, 0.18);
}

.equipment-fields-static {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.equipment-fields-static-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.equipment-field-static-full {
    grid-column: 1 / -1;
}

.equipment-field-static p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.45;
    white-space: pre-wrap;
}

.equipment-photo-view {
    cursor: default;
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(26, 35, 50, 0.55);
}

.equipment-photo-view .equipment-photo-inner {
    min-height: 180px;
}

.equipment-photo-view .equipment-photo-placeholder .equipment-photo-hint {
    color: var(--text-muted);
}

.read-only-field {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.2);
    cursor: default;
}

.equipment-photo-clear {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-light);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.equipment-photo-clear:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.tasks-group {
    background: rgba(17, 24, 39, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.1rem;
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tasks-group+.tasks-group {
    margin-top: 1.2rem;
}

.tasks-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.tasks-group-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
}

.tasks-group-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tasks-group-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.tasks-group-single {
    background: transparent;
    border: none;
    padding: 0;
}

.tasks-group-single .tasks-group-header {
    padding: 0 0.2rem 0.5rem 0.2rem;
}

.tasks-group-single .tasks-group-body {
    padding: 0;
}

.task-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.task-card:hover {
    border-color: rgba(249, 115, 22, 0.35);
    transform: translateY(-1px);
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.task-card-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.task-card-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.task-card-title-block h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
}

.task-card-assignee {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.task-status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-light);
}

.task-status-completed {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
}

.task-origin-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.16);
    color: #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.task-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.task-card-description {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

.task-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.task-card-date {
    font-weight: 500;
}

.task-card-footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.task-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    letter-spacing: 0.03em;
}

.task-report-link-btn {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-decoration: none;
    gap: 4px;
}

.task-report-link-btn:hover {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.6);
    transform: translateY(-1px);
}

.task-report-link-btn:active {
    transform: translateY(0);
}

.task-report-link.missing {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

/* Badge de conteo en filtros de tareas */
.tf-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    color: inherit;
    margin-left: 4px;
    line-height: 1;
}

.planner-tf-active .tf-count {
    background: rgba(255,255,255,0.35);
}
/* tf-count en todos los filtros de módulo */
.cot-tab .tf-count,
.reports-status-filter .tf-count,
.leg-filter-btn .tf-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    font-size: 0.65rem; font-weight: 700; margin-left: 4px; line-height: 1;
    background: rgba(0,0,0,0.12); color: inherit;
}
.cot-tab.active .tf-count,
.reports-status-filter.active .tf-count,
.leg-filter-btn.leg-filter-active .tf-count { background: rgba(255,255,255,0.35); }

.task-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.task-card-actions-empty {
    min-width: 0;
}

.task-complete-btn {
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #bbf7d0;
    border-radius: 0.75rem;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.task-complete-btn:hover,
.task-complete-btn:focus-visible {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(34, 197, 94, 0.65);
    outline: none;
}

.task-ack-btn {
    background: rgba(59, 130, 246, 0.22);
    border: 1px solid rgba(59, 130, 246, 0.45);
    color: #bfdbfe;
    border-radius: 0.75rem;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.task-ack-btn:hover,
.task-ack-btn:focus-visible {
    background: rgba(59, 130, 246, 0.32);
    border-color: rgba(59, 130, 246, 0.65);
    outline: none;
}

.task-card-completed {
    border-color: rgba(34, 197, 94, 0.35);
}

.task-completed-label {
    font-weight: 600;
    color: #bbf7d0;
}

.task-ack-label {
    font-weight: 600;
    color: #bfdbfe;
}

.planner-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.planner-calendar-panel {
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.planner-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.planner-calendar-subtitle {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.planner-calendar-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.planner-nav-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: rgba(26, 35, 50, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.planner-nav-btn:hover {
    border-color: var(--brand-primary);
    transform: translateY(-1px);
}

.planner-current-month {
    min-width: 160px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-light);
}

.planner-weekdays,
.planner-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.65rem;
}

.planner-weekdays {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.planner-weekday {
    text-align: center;
}

.planner-grid {
    min-height: 320px;
}

.planner-day {
    min-height: 100px;
    border-radius: 1rem;
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.15);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.planner-day:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

.planner-day.other-month {
    opacity: 0.35;
}

.planner-day.selected {
    border-color: var(--brand-primary);
    background: rgba(249, 115, 22, 0.1);
}

.planner-day-number {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.95rem;
}

.planner-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
}

.planner-day-task {
    font-size: 0.75rem;
    padding: 0.3rem 0.45rem;
    border-radius: 0.6rem;
    background: rgba(249, 115, 22, 0.12);
    color: var(--brand-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-day-task.more {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
}

#planner-selected-date {
    margin: 0.25rem 0 0;
}

.planner-task-form {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.planner-task-form.hidden {
    display: none;
}

.planner-form-actions {
    display: flex;
    gap: 0.75rem;
}

.planner-assignee-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 190px;
    overflow-y: auto;
    padding: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.8rem;
    background: rgba(2, 6, 23, 0.55);
}

.planner-assignee-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.65);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.planner-assignee-option:hover {
    border-color: rgba(249, 115, 22, 0.42);
    background: rgba(249, 115, 22, 0.08);
}

.planner-assignee-option input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #5c1a28;
    cursor: pointer;
}

.planner-assignee-option span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-light);
    font-size: 0.86rem;
}

.planner-assignee-option span small {
    color: var(--text-muted);
}

.planner-assignee-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 0.35rem 0.2rem;
}

.planner-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.planner-task-card {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.planner-task-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.planner-task-title {
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    font-size: 1rem;
}

.planner-task-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.planner-task-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.planner-task-actions {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.planner-task-delete {
    background: transparent;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.planner-task-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #fff;
}

.planner-tasks-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.planner-tasks-empty span {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.planner-missing {
    grid-column: 1 / -1;
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.planner-missing span {
    font-size: 2rem;
}

.planner-missing code {
    display: block;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.75rem;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: #f1f5f9;
    white-space: pre-line;
}

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

    .planner-calendar-panel {
        order: 1;
    }
}

@media (max-width: 768px) {
    .planner-layout {
        gap: 1rem;
    }

    .planner-calendar-panel,
    .planner-calendar-panel {
        gap: 0.9rem;
    }

    .planner-calendar-header {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .planner-calendar-subtitle {
        margin-top: 0.2rem;
        font-size: 0.82rem;
    }

    .planner-current-month {
        min-width: 0;
        font-size: 1rem;
    }

    .planner-weekdays,
    .planner-grid {
        gap: 0.4rem;
    }

    .planner-grid {
        min-height: 0;
    }

    .planner-day {
        min-height: 54px;
        padding: 0.2rem 0.05rem;
        border-radius: 0;
        border: none;
        background: transparent;
    }

    .planner-day-number {
        width: 1.95rem;
        height: 1.95rem;
        font-size: 0.78rem;
    }

    .planner-day-task {
        font-size: 0.65rem;
        padding: 0.14rem 0.3rem;
        border-radius: 0.5rem;
    }

    #add-task-btn {
        width: 100%;
    }

    .planner-form-actions {
        flex-direction: column;
        gap: 0.55rem;
    }

    .planner-form-actions .btn {
        width: 100%;
    }

    .planner-task-card {
        padding: 0.75rem 0.82rem;
    }
}

/* Planificador: vista operativa clara */
.planner-layout {
    grid-template-columns: minmax(620px, 1.75fr) minmax(360px, 0.8fr);
    gap: 1.4rem;
}

.planner-calendar-panel,
.planner-calendar-panel {
    padding: 1.25rem;
    gap: 0.85rem;
    background: var(--surface-soft);
    border-radius: 1rem;
    border: 1px solid var(--border-color);
}

.planner-calendar-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 0.25rem;
}

.planner-calendar-header h3 {
    color: var(--ink);
    font-size: 1.08rem;
    margin: 0;
}

.planner-nav-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--brand-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.planner-nav-btn:hover {
    background: rgba(255,91,31,0.08);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255,91,31,0.12);
}

.planner-current-month {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    min-width: 160px;
    letter-spacing: 0.01em;
}

.planner-calendar-subtitle {
    color: var(--text-muted);
    max-width: 46rem;
}

.planner-month-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.planner-summary-card {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem;
    min-height: 82px;
}

.planner-summary-card span,
.planner-summary-card small {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.planner-summary-card strong {
    display: block;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 0.2rem 0;
}

.planner-weekdays {
    color: var(--brand-primary);
    letter-spacing: 0.03em;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.planner-grid {
    min-height: 0;
}

.planner-weekdays,
.planner-grid {
    gap: 0.45rem;
}

.planner-day {
    min-height: 62px;
    background: transparent;
    color: var(--ink);
    border: none;
    border-radius: 0;
    padding: 0.25rem 0.1rem;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.22rem;
    transition: none;
}

.planner-day:hover .planner-day-number {
    background: var(--surface-2);
    border-color: rgba(255, 91, 31, 0.45);
    box-shadow: 0 2px 8px rgba(255, 91, 31, 0.12);
}

.planner-day.other-month {
    min-height: 22px;
    padding: 0.15rem 0.1rem;
    opacity: 0.38;
    pointer-events: none;
}

.planner-day.today .planner-day-number {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
    box-shadow: 0 2px 10px rgba(255, 91, 31, 0.35);
}

.planner-day.selected .planner-day-number {
    background: rgba(255, 91, 31, 0.1);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(255, 91, 31, 0.2);
    font-weight: 900;
}

.planner-day.has-tasks .planner-day-number {
    border-width: 2px;
    border-color: #a89686;
}

.planner-day.has-tasks.priority-high .planner-day-number {
    border-color: #dc2626;
}

.planner-day.has-tasks.priority-medium .planner-day-number {
    border-color: var(--brand-primary);
}

.planner-day.has-tasks.priority-low .planner-day-number {
    border-color: #16a34a;
}

.planner-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.planner-day-number {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.planner-day-count {
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

.planner-day-tasks {
    margin-top: 0.45rem;
    gap: 0.28rem;
}

.planner-day-task {
    background: #f1f5f9;
    color: var(--ink);
    border: 1px solid #efe9e3;
    border-radius: 6px;
    font-weight: 650;
}

.planner-day-task.priority-high {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.planner-day-task.priority-medium {
    background: #fdf8ec;
    color: #73202f;
    border-color: #f5e6c0;
}

.planner-day-task.priority-low,
.planner-day-task.more {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

#planner-selected-date {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.3;
}

.planner-task-form {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.planner-assignee-checklist {
    background: #ffffff;
    border-color: var(--border-color);
    border-radius: 8px;
}

.planner-assignee-option {
    background: #ffffff;
    border-color: var(--border-color);
    border-radius: 8px;
}

.planner-assignee-option span,
.planner-assignee-option span small {
    color: var(--ink);
}

.planner-tasks-empty {
    background: #f8fafc;
    border: 1px dashed #e2d9d1;
    border-radius: 8px;
    color: var(--text-muted);
    padding: 1.5rem;
    text-align: left;
}

.planner-tasks-empty strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.planner-tasks-empty p {
    margin: 0;
    line-height: 1.5;
}

.planner-task-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 1px solid var(--brand-primary);
    border-radius: 8px;
    box-shadow: none;
    padding: 0.95rem;
}

.planner-task-card.priority-high {
    border-left-color: #dc2626;
}

.planner-task-card.priority-low {
    border-left-color: #16a34a;
}

.planner-task-card header {
    gap: 0.75rem;
}

.planner-task-title {
    color: var(--ink);
    line-height: 1.3;
}

.planner-task-meta {
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.planner-task-priority,
.planner-task-status {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.18rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.1;
}

.planner-task-priority.dashboard-priority-high {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

.planner-task-priority.dashboard-priority-alta {
    background: #fdf8ec;
    color: #73202f;
    border-color: #eed08f;
}

.planner-task-priority.dashboard-priority-medium {
    background: #fdf8ec;
    color: #8a6512;
    border-color: #eed08f;
}

.planner-task-priority.dashboard-priority-low {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.planner-task-status.dashboard-status-pending,
.planner-task-status.dashboard-status-viewed {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.planner-task-status.dashboard-status-progress {
    background: #fdf8ec;
    color: #73202f;
    border-color: #f5e6c0;
}

.planner-task-status.dashboard-status-closed {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.planner-task-status.dashboard-status-cancelled {
    background: #f1f5f9;
    color: #6b5a4c;
    border-color: #e2d9d1;
}

.planner-task-description {
    color: var(--ink-soft);
    line-height: 1.45;
    margin: 0.25rem 0 0;
}

.planner-task-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.35rem 0 0;
}

.planner-task-details div {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 0;
}

.planner-task-details dt {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    margin: 0 0 0.15rem;
}

.planner-task-details dd {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-task-delete {
    color: #b91c1c;
    background: #fff7f7;
    border-color: #fecaca;
}

.planner-task-delete:hover {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

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

@media (max-width: 768px) {
    .planner-calendar-panel,
    .planner-month-summary {
        grid-template-columns: 1fr;
    }

    .planner-weekdays,
    .planner-grid {
        gap: 0.3rem;
    }

    .planner-day {
        min-height: 72px;
        padding: 0.4rem;
    }

    .planner-day.other-month {
        min-height: 22px;
        padding: 0.15rem 0.35rem;
    }

    .planner-day-task {
        font-size: 0.62rem;
        padding: 0.16rem 0.24rem;
    }

    .planner-task-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .planner-day {
        min-height: 48px;
        padding: 0.15rem 0.05rem;
    }

    .planner-day-number {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.74rem;
    }

    .planner-day.other-month {
        min-height: 18px;
    }

    .planner-day-task {
        font-size: 0.6rem;
        padding: 0.12rem 0.22rem;
    }

    .planner-weekday {
        font-size: 0.65rem;
    }
}

@media (min-width: 1024px) {
    /* topbar-add-report-btn se controla desde el CSS de reportar-view */

    #main-app {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
    }

    #sidebar {
        position: relative;
        inset: auto;
        transform: none;
        height: auto;
    }

    body.sidebar-visible #sidebar {
        transform: none;
    }

    body.sidebar-visible::before {
        display: none;
    }

    #bottom-nav {
        display: none;
    }

    #menu-btn {
        display: none;
    }
}

/* Replica fiel del index.html de referencia para escritorio web */
@media (min-width: 1024px) {
    :root {
        --orange: #4a1420;
        --orange-light: #faf1f3;
        --orange-mid: #f2e2e5;
        --orange-border: #e3c5cb;
        --slate: #35131a;
        --slate-mid: #4a3c31;
        --slate-light: #f8f5f2;
        --slate-line: #efe9e3;
        --slate-muted: #a89686;
        --slate-hint: #e2d9d1;
        --white: #ffffff;
        --text: #35131a;
        --text-soft: #6b5a4c;
        --green: #1a8c5b;
        --green-bg: #eaf7f1;
        --blue: #2563eb;
        --blue-bg: #eff4fe;
        --amber: #73202f;
        --amber-bg: #fdf8ec;
        --brand-primary: var(--orange);
        --brand-primary-hover: #9c4453;
        --bg-dark: var(--slate-light);
        --surface: var(--white);
        --surface-soft: var(--slate-light);
        --surface-muted: var(--slate-line);
        --ink: var(--text);
        --ink-soft: var(--text-soft);
        --text-muted: var(--slate-muted);
        --border-color: var(--slate-line);
        --sidebar-width: 220px;
        --shadow-soft: none;
    }

    * {
        letter-spacing: 0;
    }

    body:not(.app-not-authenticated) {
        font-family: var(--mgm-sans);
        background: var(--slate-light);
        color: var(--text);
        font-size: 14px;
        line-height: 1.5;
    }

    body:not(.app-not-authenticated) #main-app {
        display: flex;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        background: var(--slate-light);
    }

    body:not(.app-not-authenticated) #sidebar {
        width: 220px;
        min-width: 220px;
        height: 100vh;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        padding: 0;
        gap: 0;
        border: 0;
        border-right: 1px solid #f0ece6;
        overflow: hidden;
    }

    body:not(.app-not-authenticated) .sidebar-brand {
        padding: 18px 16px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #f0ece6;
        background: transparent;
        border-radius: 0;
        min-height: auto;
    }

    body:not(.app-not-authenticated) .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1.5px solid #5c1a28;
        background: #faf1f3;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }

    body:not(.app-not-authenticated) .brand-mark img {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        padding: 0;
        background: transparent;
        object-fit: contain;
    }

    body:not(.app-not-authenticated) .brand-name,
    body:not(.app-not-authenticated) .sidebar-brand strong {
        color: #1a1612;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 1.2;
    }

    body:not(.app-not-authenticated) .brand-sub {
        color: var(--mgm-texto-apagado);
        font-size: 11px;
        margin-top: 1px;
        line-height: 1.2;
    }

    body:not(.app-not-authenticated) .sidebar-user {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fafaf9;
        border-bottom: 1px solid #f0ece6;
    }

    body:not(.app-not-authenticated) .user-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #e3c5cb;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    body:not(.app-not-authenticated) .user-avatar-initial {
        font-size: 15px;
        font-weight: 700;
        color: #5c1a28;
        line-height: 1;
        text-transform: uppercase;
    }

    body:not(.app-not-authenticated) .sidebar-user-info {
        flex: 1;
        min-width: 0;
    }

    body:not(.app-not-authenticated) .user-name {
        color: #1a1612;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.app-not-authenticated) .user-role,
    body:not(.app-not-authenticated) #sidebar-user {
        color: var(--mgm-texto-apagado);
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: transparent;
        border: 0;
        padding: 0;
    }

    body:not(.app-not-authenticated) .sidebar-user-chevron {
        width: 14px;
        height: 14px;
        color: #ccc;
        flex-shrink: 0;
    }

    body:not(.app-not-authenticated) #sidebar nav,
    body:not(.app-not-authenticated) .sidebar-nav {
        flex: 1;
        padding: 12px 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow-y: auto;
    }

    body:not(.app-not-authenticated) .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        color: #555;
        font-size: 13px;
        font-weight: 400;
        transition: all 0.15s;
        text-decoration: none;
        position: relative;
        border: 1px solid transparent;
        background: transparent;
        min-height: 34px;
    }

    body:not(.app-not-authenticated) .nav-link:hover {
        background: #f7f5f3;
        border-color: #e8e4de;
        color: #1a1612;
    }

    body:not(.app-not-authenticated) .nav-link.active {
        background: #faf1f3;
        color: #5c1a28;
        border-color: rgba(232, 93, 38, 0.18);
        font-weight: 500;
    }

    body:not(.app-not-authenticated) .nav-link .nav-icon {
        width: 17px;
        height: 17px;
        background: transparent;
        color: currentColor;
        border-radius: 0;
        flex-shrink: 0;
    }

    body:not(.app-not-authenticated) .nav-link .nav-icon svg,
    body:not(.app-not-authenticated) .btn svg,
    body:not(.app-not-authenticated) .web-topbar-action svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    body:not(.app-not-authenticated) .sidebar-footer {
        padding: 12px 10px;
        border-top: 1px solid #f0ece6;
    }

    body:not(.app-not-authenticated) .logout-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 8px;
        cursor: pointer;
        color: #888;
        font-size: 13px;
        transition: all 0.15s;
        border: 1px solid #e8e4de;
        background: transparent;
        width: 100%;
        box-shadow: none;
    }

    body:not(.app-not-authenticated) .logout-btn:hover {
        background: #faf1f3;
        color: #5c1a28;
        border-color: rgba(232, 93, 38, 0.25);
    }

    body:not(.app-not-authenticated) #main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0;
        background: var(--slate-light);
    }

    body:not(.app-not-authenticated) #main-content > .section-header {
        background: var(--white);
        border-bottom: 1px solid var(--slate-line);
        padding: 0 28px;
        height: 56px;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body:not(.app-not-authenticated) .section-title-block h2 {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--text);
        margin: 0;
        line-height: 1.2;
    }

    body:not(.app-not-authenticated) #header-user-role {
        font-size: 12px;
        color: var(--mgm-texto-apagado);
        margin-top: 1px;
    }

    body:not(.app-not-authenticated) .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body:not(.app-not-authenticated) .notification-btn,
    body:not(.app-not-authenticated) .btn-icon {
        width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 10px;
        border: 1px solid var(--slate-line);
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--slate-muted);
        transition: all 0.15s;
        position: relative;
        padding: 0;
        box-shadow: none;
    }

    body:not(.app-not-authenticated) .notification-btn:hover,
    body:not(.app-not-authenticated) .btn-icon:hover {
        background: var(--slate-light);
        color: var(--text);
    }

    body:not(.app-not-authenticated) .notification-icon {
        font-size: 14px;
        line-height: 1;
    }

    body:not(.app-not-authenticated) .notification-count:not(.hidden) {
        top: 7px;
        right: 7px;
        width: 6px;
        height: 6px;
        min-width: 6px;
        padding: 0;
        border-radius: 50%;
        background: var(--orange);
        border: 1.5px solid var(--white);
        font-size: 0;
    }

    body:not(.app-not-authenticated) .btn,
    body:not(.app-not-authenticated) .btn-primary,
    body:not(.app-not-authenticated) .btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 14px;
        min-height: 34px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
        box-shadow: none;
    }

    body:not(.app-not-authenticated) .btn-primary {
        background: var(--orange);
        border: 1px solid var(--orange);
        color: #ffffff;
    }

    body:not(.app-not-authenticated) .btn-primary:hover {
        background: #9c4453;
        border-color: #9c4453;
        transform: none;
    }

    body:not(.app-not-authenticated) .btn-outline,
    body:not(.app-not-authenticated) .web-topbar-action.btn-outline {
        background: var(--white);
        color: var(--text);
        border: 1px solid var(--slate-line);
    }

    body:not(.app-not-authenticated) .btn-outline:hover {
        background: var(--slate-light);
        color: var(--text);
        transform: none;
    }

    body:not(.app-not-authenticated) #back-btn,
    body:not(.app-not-authenticated) #menu-btn {
        display: none;
    }

    body:not(.app-not-authenticated) .page-view {
        padding: 24px 28px;
    }

    body:not(.app-not-authenticated) #reports-view .reports-hero {
        display: none;
    }

    body:not(.app-not-authenticated) .reports-shell {
        display: block;
    }

    body:not(.app-not-authenticated) .reports-status-filters {
        display: flex;
        gap: 2px;
        background: var(--slate-light);
        border: 1px solid var(--slate-line);
        border-radius: 10px;
        padding: 3px;
        margin-bottom: 16px;
        width: fit-content;
    }

    body:not(.app-not-authenticated) .reports-status-filter {
        padding: 6px 14px;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        color: var(--slate-muted);
        border: none;
        background: none;
        font-family: inherit;
        transition: all 0.15s;
    }

    body:not(.app-not-authenticated) .reports-status-filter.active {
        background: var(--white);
        color: var(--orange);
        border: 1px solid var(--orange-border);
        font-weight: 600;
    }

    body:not(.app-not-authenticated) .table-wrap,
    body:not(.app-not-authenticated) .reports-table-wrap,
    body:not(.app-not-authenticated) .card,
    body:not(.app-not-authenticated) .dashboard-card,
    body:not(.app-not-authenticated) .profiles-section,
    body:not(.app-not-authenticated) .planner-calendar-panel,
    body:not(.app-not-authenticated) .planner-sidebar,
    body:not(.app-not-authenticated) .time-map-card {
        background: var(--white);
        border: 1px solid var(--slate-line);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: none;
    }

    body:not(.app-not-authenticated) .table-head {
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--slate-line);
    }

    body:not(.app-not-authenticated) .table-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }

    body:not(.app-not-authenticated) .table-count {
        font-size: 11px;
        color: var(--slate-muted);
        background: var(--slate-light);
        padding: 2px 8px;
        border-radius: 20px;
        font-family: var(--mgm-mono);
    }

    body:not(.app-not-authenticated) .data-table,
    body:not(.app-not-authenticated) .profiles-table,
    body:not(.app-not-authenticated) .reportar-table,
    body:not(.app-not-authenticated) .dashboard-table {
        width: 100%;
        border-collapse: collapse;
    }

    body:not(.app-not-authenticated) .data-table th,
    body:not(.app-not-authenticated) .profiles-table th,
    body:not(.app-not-authenticated) .reportar-table th,
    body:not(.app-not-authenticated) .dashboard-table th {
        padding: 10px 18px;
        text-align: left;
        font-size: 10px;
        font-weight: 600;
        color: var(--slate-hint);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        background: var(--slate-light);
        border-bottom: 1px solid var(--slate-line);
    }

    body:not(.app-not-authenticated) .data-table td,
    body:not(.app-not-authenticated) .profiles-table td,
    body:not(.app-not-authenticated) .reportar-table td,
    body:not(.app-not-authenticated) .dashboard-table td {
        padding: 12px 18px;
        font-size: 13px;
        color: var(--text-soft);
        border-bottom: 1px solid var(--slate-line);
        vertical-align: top;
    }

    body:not(.app-not-authenticated) .data-table tr:last-child td,
    body:not(.app-not-authenticated) .profiles-table tr:last-child td,
    body:not(.app-not-authenticated) .reportar-table tr:last-child td,
    body:not(.app-not-authenticated) .dashboard-table tr:last-child td {
        border-bottom: none;
    }

    body:not(.app-not-authenticated) .data-table tr:hover td,
    body:not(.app-not-authenticated) .profiles-table tr:hover td,
    body:not(.app-not-authenticated) .reportar-table tr:hover td,
    body:not(.app-not-authenticated) .dashboard-table tr:hover td {
        background: #fdfbf9;
    }

    body:not(.app-not-authenticated) .empty-row td,
    body:not(.app-not-authenticated) .empty-state {
        text-align: center;
        color: var(--slate-hint);
        padding: 28px;
        font-size: 13px;
    }

    body:not(.app-not-authenticated) .report-table-code,
    body:not(.app-not-authenticated) .data-table td strong {
        display: block;
        color: var(--text);
        font-weight: 600;
        line-height: 1.25;
    }

    body:not(.app-not-authenticated) .data-table td small {
        display: block;
        color: var(--slate-muted);
        font-size: 11px;
        line-height: 1.35;
        margin-top: 2px;
        max-width: 360px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.app-not-authenticated) .report-card-actions {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    body:not(.app-not-authenticated) .report-card-actions-btn {
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 6px;
        border: 1px solid var(--slate-line);
        background: var(--white);
        color: var(--slate-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    body:not(.app-not-authenticated) .report-card-actions-btn:hover {
        background: var(--slate-light);
        color: var(--text);
    }

    body:not(.app-not-authenticated) .report-card-actions-btn svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

    body:not(.app-not-authenticated) .report-card-status,
    body:not(.app-not-authenticated) .report-card-badge,
    body:not(.app-not-authenticated) .badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 9px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
        border: 0;
        box-shadow: none !important;
        margin-right: 4px;
    }

    body:not(.app-not-authenticated) .report-card-status.status-cerrado,
    body:not(.app-not-authenticated) .badge-success {
        background: var(--green-bg);
        color: var(--green);
    }

    body:not(.app-not-authenticated) .report-card-status.status-abierto,
    body:not(.app-not-authenticated) .report-card-badge.priority-alta {
        background: var(--orange-light);
        color: var(--orange);
    }

    body:not(.app-not-authenticated) .report-card-status.status-en-progreso,
    body:not(.app-not-authenticated) .report-card-badge.priority-media {
        background: var(--amber-bg);
        color: var(--amber);
    }

    body:not(.app-not-authenticated) .report-card-badge.priority-baja {
        background: var(--blue-bg);
        color: var(--blue);
    }

    body:not(.app-not-authenticated) #planner-view .planner-month-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-summary-card {
        background: var(--white);
        border: 1px solid var(--slate-line);
        border-radius: 14px;
        padding: 16px 18px;
        min-height: auto;
    }

    body:not(.app-not-authenticated) #planner-view .planner-summary-card:nth-child(3) {
        background: var(--orange-light);
        border-color: var(--orange-border);
    }

    body:not(.app-not-authenticated) #planner-view .planner-summary-card span {
        font-size: 11px;
        color: var(--slate-muted);
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-summary-card strong {
        font-family: var(--mgm-sans);
        font-size: 28px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--text);
        line-height: 1.15;
    }

    body:not(.app-not-authenticated) #planner-view .planner-summary-card:nth-child(3) strong {
        color: var(--orange);
    }

    body:not(.app-not-authenticated) #planner-view .planner-summary-card small {
        font-size: 11px;
        color: var(--slate-hint);
        margin-top: 2px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 16px;
        align-items: start;
    }

    body:not(.app-not-authenticated) #planner-view .planner-calendar-panel {
        padding: 0;
    }

    body:not(.app-not-authenticated) #planner-view .planner-calendar-header {
        padding: 14px 18px;
        border-bottom: 1px solid var(--slate-line);
        background: var(--white);
    }

    body:not(.app-not-authenticated) #planner-view .planner-calendar-header h3,
    body:not(.app-not-authenticated) #planner-view .planner-calendar-subtitle {
        display: none;
    }

    body:not(.app-not-authenticated) #planner-view .planner-current-month {
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
        min-width: 120px;
        text-align: left;
    }

    body:not(.app-not-authenticated) #planner-view .planner-nav-btn {
        width: 26px;
        height: 26px;
        min-height: 26px;
        padding: 0;
        border-radius: 6px;
        border: 1px solid var(--slate-line);
        background: var(--white);
        color: var(--slate-muted);
        font-size: 12px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-nav-btn:hover {
        background: var(--slate-light);
        color: var(--text);
    }

    body:not(.app-not-authenticated) #planner-view .planner-weekdays,
    body:not(.app-not-authenticated) #planner-view .planner-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0;
    }

    body:not(.app-not-authenticated) #planner-view .planner-weekdays {
        padding: 12px 12px 0;
    }

    body:not(.app-not-authenticated) #planner-view .planner-grid {
        padding: 0 12px 12px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-weekday {
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        color: var(--slate-hint);
        padding: 4px 0 8px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day {
        text-align: center;
        min-height: 42px;
        padding: 6px 2px;
        border-radius: 6px;
        font-size: 12px;
        color: var(--text-soft);
        cursor: pointer;
        transition: background 0.1s;
        position: relative;
        background: transparent;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day:hover {
        background: var(--slate-light);
        transform: none;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day.selected,
    body:not(.app-not-authenticated) #planner-view .planner-day.today {
        background: var(--orange);
        color: #ffffff;
        font-weight: 600;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day.other-month {
        color: var(--slate-hint);
        background: transparent;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day-head {
        display: block;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day-number {
        color: inherit;
        font-weight: inherit;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day-count {
        width: 3px;
        min-width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--orange);
        color: transparent;
        margin: 1px auto 0;
        display: block;
        font-size: 0;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day.selected .planner-day-count,
    body:not(.app-not-authenticated) #planner-view .planner-day.today .planner-day-count {
        background: rgba(255, 255, 255, 0.7);
    }

    body:not(.app-not-authenticated) #planner-view .planner-day-tasks {
        display: none;
    }

    body:not(.app-not-authenticated) #planner-view .planner-sidebar {
        padding: 18px;
    }

    body:not(.app-not-authenticated) #planner-view #planner-selected-date {
        font-size: 11px;
        color: var(--slate-muted);
        font-weight: 400;
        margin: 0;
    }

    body:not(.app-not-authenticated) #planner-view #add-task-btn {
        display: none !important;
    }
}

/* Login con video protagonista y panel translúcido */
body.app-not-authenticated {
    background: #0d0708;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
}

html:has(body.app-not-authenticated) {
    background: #0d0708;
    overflow: hidden;
}

body.app-not-authenticated #login-section {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    margin: 0;
    padding: clamp(1rem, 3vw, 2rem);
    align-items: center;
    justify-content: center;
    background: #0d0708;
}

body.app-not-authenticated .login-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.app-not-authenticated .login-background::after {
    content: none;
}

body.app-not-authenticated .login-background video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.16) contrast(1.04) brightness(1.02);
    margin: 0;
    transform: none;
}

body.app-not-authenticated #login-section::after {
    content: none;
}

body.app-not-authenticated .login-panel {
    width: min(390px, calc(100vw - 2rem));
    max-width: 390px;
    padding: 1.7rem 1.55rem 1.45rem;
    gap: 1.55rem;
    position: relative;
    z-index: 1;
    background: rgba(8, 10, 14, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 20px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px) saturate(1.18);
    -webkit-backdrop-filter: blur(4px) saturate(1.18);
}

body.app-not-authenticated .login-panel::before {
    content: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

body.app-not-authenticated .login-header {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    text-align: center;
}

body.app-not-authenticated .login-logo {
    /* Solo el logo de MGM, en circulo. Sin caja blanca: el PNG es
       transparente y la sombra sigue la silueta, no el recuadro. */
    width: clamp(170px, 50vmin, 220px);
    height: clamp(170px, 50vmin, 220px);
    object-fit: contain;
    margin-bottom: 1.4rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

body.app-not-authenticated .login-header h1 {
    color: #ffffff;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.38);
}

body.app-not-authenticated .login-header p {
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0.55rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

body.app-not-authenticated #login-form {
    position: relative;
    z-index: 1;
    gap: 1.05rem;
    margin-top: 1.45rem;
}

body.app-not-authenticated #login-form label,
body.app-not-authenticated .login-panel label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.app-not-authenticated #login-form input,
body.app-not-authenticated .login-panel input {
    margin-top: 0.42rem;
    padding: 0.78rem 0.92rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: #ffffff;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body.app-not-authenticated #login-form input::placeholder {
    color: rgba(255, 255, 255, 0.54);
}

body.app-not-authenticated #login-form input:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 144, 92, 0.78);
    box-shadow:
        0 0 0 3px rgba(232, 80, 10, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.app-not-authenticated #login-form button[type="submit"],
body.app-not-authenticated .login-panel button[type="submit"] {
    margin-top: 0.15rem;
    padding: 0.84rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #9c4453, #4a1420);
    border: 1px solid rgba(255, 126, 66, 0.85);
    color: #ffffff;
    box-shadow:
        0 14px 30px rgba(232, 80, 10, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.app-not-authenticated #login-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #c08894, #9c4453);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    body.app-not-authenticated #login-section {
        justify-content: center;
        padding-right: clamp(1rem, 3vw, 2rem);
    }
}

@media (max-width: 768px) {
    body.app-not-authenticated .login-panel {
        width: min(360px, calc(100vw - 1.5rem));
        padding: 1.6rem 1.25rem;
    }
}


.section-header span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.equipment-view-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.equipment-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
}

.equipment-view-title {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.equipment-view-title h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.equipment-view-title p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.equipment-view-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.equipment-search-wrapper {
    min-width: 240px;
    position: relative;
}

.equipment-submenu-wrapper {
    position: relative;
}

.equipment-submenu-toggle {
    min-width: 190px;
}

.equipment-submenu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    width: 240px;
    padding: 0.45rem;
    background: rgba(17, 24, 39, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.85rem;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
    z-index: 35;
}

.equipment-submenu-item {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    padding: 0.55rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.equipment-submenu-item:hover {
    border-color: rgba(249, 115, 22, 0.55);
    background: rgba(249, 115, 22, 0.12);
    color: #9c4453;
    transform: translateY(-1px);
}

#equipment-search-input {
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.75rem;
    color: var(--text-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#equipment-search-input:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.equipment-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.equipment-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.equipment-category-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.equipment-category-card:hover {
    border-color: rgba(249, 115, 22, 0.45);
    transform: translateY(-2px);
}

.equipment-category-image {
    width: 100%;
    height: 140px;
    border-radius: 0.8rem;
    object-fit: cover;
    background: rgba(30, 41, 59, 0.6);
}

.equipment-category-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.equipment-category-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.equipment-category-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.equipment-empty-state {
    background: rgba(15, 23, 42, 0.85);
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.equipment-context-card {
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.equipment-context-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.equipment-context-card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.equipment-context-card-header p {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.equipment-context-eyebrow {
    display: inline-flex;
    align-items: center;
    color: #9c4453;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.equipment-plant-map-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.equipment-plant-map-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.equipment-plant-map-stat {
    background: rgba(30, 41, 59, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.95rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.equipment-plant-map-stat span,
.equipment-plant-map-stat small {
    color: var(--text-muted);
}

.equipment-plant-map-stat strong {
    font-size: 1.55rem;
    color: var(--text-light);
}

.equipment-plant-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.equipment-plant-map-card,
.equipment-plant-map-sidebar {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    overflow: hidden;
}

.equipment-plant-map-canvas {
    width: 100%;
    min-height: 520px;
}

.equipment-plant-map-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.equipment-plant-map-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.equipment-plant-map-sidebar-head h4 {
    margin: 0;
    font-size: 1rem;
}

.equipment-plant-map-sidebar-head span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.equipment-plant-map-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    overflow: auto;
}

.equipment-plant-map-item {
    background: rgba(30, 41, 59, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.95rem;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.equipment-plant-map-item.active {
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.16);
}

.equipment-plant-map-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.equipment-plant-map-item-header h4 {
    margin: 0;
    font-size: 0.98rem;
}

.equipment-plant-map-item-header p {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.equipment-plant-map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.equipment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.equipment-list-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.equipment-list-item:hover {
    border-color: rgba(249, 115, 22, 0.4);
    transform: translateY(-1px);
}

.equipment-list-item img,
.equipment-list-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 0.75rem;
    background: rgba(30, 41, 59, 0.7);
    flex-shrink: 0;
}

.equipment-list-item h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.equipment-list-item p {
    margin: 0.2rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.equipment-detail-card {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.2rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.equipment-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.equipment-detail-block h4 {
    margin: 0 0 0.4rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.equipment-detail-block p {
    margin: 0;
    font-size: 1rem;
}

.equipment-answer-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
}

.equipment-answer-pill.si {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.equipment-answer-pill.no {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.equipment-answer-pill.na {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
}

.equipment-answer-pill.nota {
    background: rgba(250, 204, 21, 0.2);
    color: #d9a62e;
}

.equipment-question {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipment-question-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.equipment-question-label .required {
    color: var(--danger-color);
}

.equipment-question-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.6rem;
}

.equipment-question-pill {
    padding: 0.6rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.equipment-question-pill.active {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.6);
}

.equipment-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.equipment-question-comment textarea {
    width: 100%;
    min-height: 64px;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-light);
    padding: 0.75rem;
    font-size: 0.85rem;
    resize: vertical;
}

.equipment-question-comment textarea:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.equipment-question-comment-read {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.6);
    border-radius: 0.75rem;
    padding: 0.6rem 0.8rem;
}

.equipment-form {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.2rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.equipment-step-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.4rem;
}

.equipment-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.equipment-form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.equipment-form-group input,
.equipment-form-group select,
.equipment-form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.85);
    color: var(--text-light);
    resize: vertical;
    min-height: 44px;
}

.equipment-form-group input:focus,
.equipment-form-group select:focus,
.equipment-form-group textarea:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.equipment-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.equipment-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.6rem;
}

.equipment-check-option {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.55);
    font-size: 0.84rem;
}

.equipment-check-option input {
    width: 16px;
    height: 16px;
}

.equipment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.equipment-photo-preview {
    max-height: 220px;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
}

.equipment-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.equipment-gallery-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.equipment-gallery-card.new {
    border-style: dashed;
}

.equipment-gallery-card.cover {
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3);
}

.equipment-gallery-card.cover::after {
    content: "Principal";
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: rgba(249, 115, 22, 0.85);
    color: #1d080c;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.equipment-gallery-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.75rem;
}

.equipment-gallery-card-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.equipment-photo-btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-light);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.equipment-photo-btn:hover:not(:disabled) {
    border-color: rgba(249, 115, 22, 0.45);
    background: rgba(249, 115, 22, 0.12);
}

.equipment-photo-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.equipment-gallery-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(148, 163, 184, 0.35);
    border-radius: 1rem;
    padding: 1.5rem;
    color: var(--text-muted);
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.equipment-gallery-add:hover {
    border-color: rgba(249, 115, 22, 0.6);
    color: var(--text-light);
}

.equipment-gallery-add.dragover {
    border-color: var(--brand-primary);
    background: rgba(249, 115, 22, 0.06);
    color: var(--text-light);
}

.equipment-gallery-add input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.equipment-gallery-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.2);
    color: var(--brand-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.equipment-gallery-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.equipment-gallery-limit {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.equipment-location-status {
    margin-top: 0.4rem;
    min-height: 1.6rem;
}

.equipment-detail-gallery {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.equipment-detail-gallery-item {
    margin: 0;
}

.equipment-detail-gallery-item img {
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    max-height: 220px;
}

.equipment-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
}

.equipment-detail-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

#equipment-view.equipment-index-mode .equipment-view-header {
    display: none;
}

#equipment-view.equipment-index-mode .equipment-content {
    gap: 0;
}

.equipment-index-shell {
    --ei-ink: #f7fbff;
    --ei-muted: #c9bcb0;
    --ei-line: rgba(154, 169, 188, 0.2);
    --ei-panel: #3c1019;
    --ei-panel-2: #4e1520;
    --ei-green: #2fbf71;
    --ei-red: #dc4c42;
    --ei-amber: #d9a62e;
    --ei-teal: #39a6a2;
    --ei-blue: #4e86d8;
    min-height: calc(100vh - 112px);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    background: #f8f5f2;
    color: var(--ei-ink);
    border-radius: 8px;
    overflow: hidden;
}

.equipment-index-header {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) auto minmax(220px, 0.9fr);
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: #ffffff;
    border-bottom: 1px solid #efe9e3;
    color: #3c1019;
}

.equipment-index-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.equipment-index-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #9c4453;
    color: #fff;
    font-weight: 900;
}

.equipment-index-brand strong,
.equipment-index-brand small {
    display: block;
    line-height: 1.1;
}

.equipment-index-brand small {
    color: #8a7767;
    margin-top: 3px;
}

.equipment-index-layer-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid #e2d9d1;
    background: #f7f9fb;
    border-radius: 8px;
}

.equipment-index-layer-tabs button,
.equipment-index-reset {
    min-height: 38px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #4a3c31;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    font-weight: 800;
    cursor: pointer;
}

.equipment-index-layer-tabs button.active {
    background: #3c1019;
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 34, 53, 0.18);
}

.equipment-index-header-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.equipment-index-live,
.equipment-index-clock {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2d9d1;
    border-radius: 999px;
    padding: 0 12px;
    color: #6b5a4c;
    font-weight: 800;
    font-size: 0.8rem;
    background: #fff;
}

.equipment-index-live i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ei-green);
    box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.15);
}

.equipment-index-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) auto;
    align-items: end;
    gap: 12px;
    padding: 14px 18px;
    background: #f8f5f2;
    border-bottom: 1px solid #efe9e3;
}

.equipment-index-filters label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.equipment-index-filters label.hidden {
    display: none;
}

.equipment-index-filters span {
    color: #8a7767;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.equipment-index-filters input,
.equipment-index-filters select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e2d9d1;
    border-radius: 6px;
    background: #fff;
    color: #3c1019;
    padding: 0 12px;
}

.equipment-index-filters input:focus,
.equipment-index-filters select:focus {
    outline: none;
    border-color: #9c4453;
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.14);
}

.equipment-index-reset {
    border-color: #e2d9d1;
    background: #fff;
    color: #551a26;
}

.equipment-index-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 1px;
    background: #efe9e3;
    border-bottom: 1px solid #efe9e3;
}

.equipment-index-metric {
    min-height: 78px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 16px;
    background: #fff;
    color: #3c1019;
}

.equipment-index-metric-icon {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
}

.equipment-index-metric-icon.green { background: var(--ei-green); }
.equipment-index-metric-icon.red { background: var(--ei-red); }
.equipment-index-metric-icon.amber { background: var(--ei-amber); }
.equipment-index-metric-icon.blue { background: var(--ei-blue); }
.equipment-index-metric-icon.teal { background: var(--ei-teal); }

.equipment-index-metric strong {
    font-size: 1.45rem;
    line-height: 1;
}

.equipment-index-metric small {
    color: #8a7767;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.equipment-index-workspace {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

.equipment-index-map-wrap {
    min-height: calc(100vh - 307px);
    position: relative;
    background: #dfe8df;
    overflow: hidden;
}

#equipment-index-map {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.equipment-index-legend {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: min(720px, calc(100% - 28px));
    border: 1px solid rgba(23, 34, 53, 0.14);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 26px rgba(23, 34, 53, 0.12);
    color: #6b5a4c;
    padding: 9px 10px;
    font-size: 0.78rem;
    font-weight: 800;
}

.equipment-index-legend strong {
    color: #3c1019;
}

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

.equipment-index-legend span.hidden {
    display: none;
}

.equipment-index-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.equipment-index-legend i.critica { background: var(--ei-red); }
.equipment-index-legend i.alta { background: var(--ei-amber); }
.equipment-index-legend i.media { background: var(--ei-teal); }
.equipment-index-legend i.sin_hallazgos { background: var(--ei-green); }
.equipment-index-legend i.tecnico { background: var(--ei-blue); }

.equipment-index-dock {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 500;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    border: 1px solid rgba(23, 34, 53, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(23, 34, 53, 0.16);
}

.equipment-index-chip {
    flex: 0 0 220px;
    display: grid;
    gap: 3px;
    text-align: left;
    border: 1px solid #e2d9d1;
    border-left: 1px solid #c9bcb0;
    border-radius: 7px;
    background: #fff;
    color: #3c1019;
    padding: 9px 10px;
    cursor: pointer;
}

.equipment-index-chip.static {
    flex-basis: auto;
    cursor: default;
    color: #8a7767;
}

.equipment-index-chip.selected {
    border-color: #3c1019;
    box-shadow: 0 0 0 2px rgba(23, 34, 53, 0.16);
}

.equipment-index-chip strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-index-chip span {
    color: #8a7767;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-index-chip.critica { border-left-color: var(--ei-red); }
.equipment-index-chip.alta { border-left-color: var(--ei-amber); }
.equipment-index-chip.media { border-left-color: var(--ei-teal); }
.equipment-index-chip.sin_hallazgos { border-left-color: var(--ei-green); }
.equipment-index-chip.tecnico { border-left-color: var(--ei-blue); }

.equipment-index-detail-panel {
    min-height: calc(100vh - 307px);
    max-height: calc(100vh - 307px);
    overflow: auto;
    background: var(--ei-panel);
    border-left: 1px solid rgba(154, 169, 188, 0.2);
}

.equipment-index-empty-panel {
    min-height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: var(--ei-muted);
    text-align: center;
    padding: 28px;
}

.equipment-index-empty-panel i {
    font-size: 2.6rem;
}

.equipment-index-photo-wrap {
    height: 250px;
    background: #280b11;
    overflow: hidden;
}

.equipment-index-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipment-index-photo-missing {
    height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--ei-muted);
}

.equipment-index-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--ei-line);
    background: #370f17;
}

.equipment-index-tabs button {
    min-height: 42px;
    border: 0;
    border-right: 1px solid var(--ei-line);
    background: transparent;
    color: var(--ei-muted);
    font-weight: 900;
}

.equipment-index-tabs button.active {
    color: #fff;
    background: rgba(240, 90, 40, 0.16);
}

.equipment-index-panel-body {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.equipment-index-kicker,
.equipment-index-panel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.equipment-index-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(154, 169, 188, 0.16);
    color: var(--ei-muted);
    font-weight: 900;
    font-size: 0.72rem;
}

.equipment-index-badge.critica { background: rgba(220, 76, 66, 0.18); color: #ff8b82; }
.equipment-index-badge.alta { background: rgba(209, 144, 40, 0.2); color: #e5bb5c; }
.equipment-index-badge.media { background: rgba(57, 166, 162, 0.18); color: #6fd5d0; }
.equipment-index-badge.sin_hallazgos,
.equipment-index-badge.active { background: rgba(47, 191, 113, 0.18); color: #79dfaa; }
.equipment-index-badge.warn,
.equipment-index-badge.off { background: rgba(154, 169, 188, 0.18); color: #e2d9d1; }

.equipment-index-panel-body h2 {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    line-height: 1.15;
}

.equipment-index-subtitle {
    margin: -10px 0 0;
    color: var(--ei-muted);
}

.equipment-index-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.equipment-index-info-grid .full {
    grid-column: 1 / -1;
}

.equipment-index-info-grid div {
    min-width: 0;
    border: 1px solid var(--ei-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
}

.equipment-index-info-grid span {
    display: block;
    color: var(--ei-muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.equipment-index-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.equipment-index-answer-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.equipment-index-answer-summary div {
    border-radius: 9px;
    padding: 12px;
    text-align: center;
}

.equipment-index-answer-summary strong,
.equipment-index-answer-summary span {
    display: block;
}

.equipment-index-answer-summary strong {
    color: #fff;
    font-size: 1.5rem;
}

.equipment-index-answer-summary span {
    font-size: 0.72rem;
    font-weight: 900;
}

.equipment-index-answer-summary .no { background: rgba(220, 76, 66, 0.17); color: #ff8b82; }
.equipment-index-answer-summary .si { background: rgba(47, 191, 113, 0.16); color: #79dfaa; }
.equipment-index-answer-summary .na { background: rgba(154, 169, 188, 0.15); color: #e2d9d1; }

.equipment-index-note {
    border-left: 1px solid #9c4453;
    border-radius: 7px;
    background: rgba(240, 90, 40, 0.1);
    color: #e3c5cb;
    padding: 11px 12px;
    line-height: 1.35;
}

.equipment-index-panel-body h3 {
    margin: 0;
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.equipment-index-answer-list {
    display: grid;
    gap: 8px;
}

.equipment-index-answer-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 9px;
    border: 1px solid var(--ei-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.equipment-index-answer-row p {
    margin: 0;
    color: #e2d9d1;
    font-size: 0.8rem;
    line-height: 1.3;
}

.equipment-index-answer-chip {
    min-height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
}

.equipment-index-answer-chip.si { background: rgba(47, 191, 113, 0.18); color: #79dfaa; }
.equipment-index-answer-chip.no { background: rgba(220, 76, 66, 0.19); color: #ff8b82; }
.equipment-index-answer-chip.na { background: rgba(154, 169, 188, 0.18); color: #e2d9d1; }

.equipment-index-tech-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.equipment-index-tech-hero > span {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--ei-blue);
    font-weight: 900;
    font-size: 1.2rem;
}

.equipment-index-tech-hero > span.off {
    background: #8a7767;
}

.equipment-index-tech-hero p {
    margin: 3px 0 8px;
    color: var(--ei-muted);
}

.equipment-index-schedule {
    display: grid;
    gap: 8px;
    border: 1px solid var(--ei-line);
    border-radius: 9px;
    padding: 12px;
    color: var(--ei-muted);
    font-weight: 800;
}

.equipment-index-schedule-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.equipment-index-schedule-row div {
    height: 8px;
    border-radius: 999px;
    background: rgba(154, 169, 188, 0.18);
    overflow: hidden;
}

.equipment-index-schedule-row i {
    display: block;
    height: 100%;
    background: var(--ei-green);
}

.equipment-index-pin {
    width: 34px;
    height: 34px;
    border-radius: 999px 999px 999px 0;
    transform: rotate(-45deg);
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    box-shadow: 0 10px 20px rgba(23, 34, 53, 0.26);
}

.equipment-index-pin span {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 900;
}

.equipment-index-pin--critica { background: var(--ei-red, #dc4c42); }
.equipment-index-pin--alta { background: var(--ei-amber, #d9a62e); }
.equipment-index-pin--media { background: var(--ei-teal, #39a6a2); }
.equipment-index-pin--sin_hallazgos { background: var(--ei-green, #2fbf71); }

.equipment-index-tech-pin {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 10px 20px rgba(23, 34, 53, 0.22);
    font-size: 0.78rem;
    font-weight: 900;
}

.equipment-index-tech-pin.active { background: var(--ei-blue); }
.equipment-index-tech-pin.inactive { background: #8a7767; }

.equipment-index-shell .leaflet-container {
    font-family: inherit;
}

.equipment-index-shell .leaflet-tooltip {
    border: 0;
    border-radius: 7px;
    background: rgba(23, 34, 53, 0.92);
    color: #fff;
    box-shadow: 0 10px 24px rgba(23, 34, 53, 0.25);
}

.equipment-index-detail-panel {
    background: #ffffff;
    color: #3c1019;
    border-left-color: #efe9e3;
}

.equipment-index-photo-wrap {
    background: #f8f5f2;
}

.equipment-index-tabs {
    background: #ffffff;
    border-bottom-color: #efe9e3;
}

.equipment-index-tabs button {
    color: #8a7767;
    border-right-color: #efe9e3;
}

.equipment-index-tabs button.active {
    color: #9c4453;
    background: #faf1f3;
}

.equipment-index-panel-body h2,
.equipment-index-panel-body h3 {
    color: #3c1019;
}

.equipment-index-subtitle,
.equipment-index-tech-hero p {
    color: #8a7767;
}

.equipment-index-info-grid div,
.equipment-index-schedule,
.equipment-index-answer-row {
    border-color: #efe9e3;
    background: #f8fafc;
}

.equipment-index-info-grid span,
.equipment-index-schedule {
    color: #8a7767;
}

.equipment-index-info-grid strong,
.equipment-index-answer-row p {
    color: #3c1019;
}

.equipment-index-answer-row p {
    font-weight: 600;
}

.equipment-index-note {
    background: #fdf8ec;
    color: #73202f;
}

.equipment-index-answer-summary .no { background: #fff0ef; color: #c63b32; }
.equipment-index-answer-summary .si { background: #ecfdf3; color: #087a43; }
.equipment-index-answer-summary .na { background: #f1f5f9; color: #6b5a4c; }
.equipment-index-answer-summary strong { color: currentColor; }

.equipment-index-badge.neutral,
.equipment-index-badge.warn,
.equipment-index-badge.off {
    background: #eef3f8;
    color: #6b5a4c;
}

.equipment-index-badge.critica { background: #fff0ef; color: #c63b32; }
.equipment-index-badge.alta { background: #faf1da; color: #8a6512; }
.equipment-index-badge.media { background: #e9fbf9; color: #217a76; }
.equipment-index-badge.sin_hallazgos,
.equipment-index-badge.active { background: #ecfdf3; color: #087a43; }

.equipment-index-answer-chip.si { background: #dff8ea; color: #087a43; }
.equipment-index-answer-chip.no { background: #ffe5e2; color: #c63b32; }
.equipment-index-answer-chip.na { background: #e8eef5; color: #6b5a4c; }

.equipment-index-schedule-row div {
    background: #dbe4ee;
}

@media (max-width: 1180px) {
    .equipment-index-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .equipment-index-header-right,
    .equipment-index-layer-tabs {
        justify-content: flex-start;
    }

    .equipment-index-workspace {
        grid-template-columns: 1fr;
    }

    .equipment-index-detail-panel {
        max-height: none;
        min-height: auto;
        border-left: 0;
    }
}

@media (max-width: 780px) {
    .equipment-index-shell {
        min-height: auto;
    }

    .equipment-index-filters,
    .equipment-index-metrics {
        grid-template-columns: 1fr;
    }

    .equipment-index-layer-tabs {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .equipment-index-layer-tabs button {
        flex: 0 0 auto;
    }

    .equipment-index-map-wrap {
        min-height: 66vh;
    }

    .equipment-index-detail-panel {
        min-height: auto;
    }
}

/* =========================================================
   FSM FASE 1 — BADGES DE ZONA GEOGRÁFICA
   Usado en la tabla de Perfiles para identificar la zona
   de cada tecnico/auxiliar a simple vista.
   ========================================================= */

.badge-zona {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(249, 115, 22, 0.12);
    color: #5c1a28;
    border: 1px solid rgba(249, 115, 22, 0.25);
    white-space: nowrap;
}

.badge-zona:empty::after {
    content: '—';
    opacity: 0.5;
}

/* =========================================================
   SISTEMA DE NOTIFICACIONES TOAST
   Reemplaza los alert() bloqueantes por notificaciones
   visuales no intrusivas en la esquina inferior derecha.
   ========================================================= */

#toast-container {
    position: fixed;
    bottom: 5rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 2.5rem);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.1rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: all;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: toastEnter 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        toastLeave 0.35s ease 3.65s forwards;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.toast-icon {
    font-size: 1.1rem;
    line-height: 1.45;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
}

/* Tipos de toast */
.toast-error {
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
}

.toast-success {
    background: rgba(22, 163, 74, 0.92);
    color: #fff;
}

.toast-warning {
    background: rgba(202, 138, 4, 0.92);
    color: #fff;
}

.toast-info {
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
}

@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateX(110%) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastLeave {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }

    to {
        opacity: 0;
        transform: translateY(8px);
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

@media (max-width: 480px) {
    #toast-container {
        bottom: 5.5rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}/* Tablero Inspection Question UI */
.inspection-question-card {
  background: var(--bg-dark-accent);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
}

/* ============================================================
   HARD FIXES - contraste y estabilidad visual
   ============================================================ */

body:not(.app-not-authenticated) #tasks-view .task-card,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card {
    background: #ffffff !important;
    color: #241c17 !important;
    border: 1px solid #e6e1d9 !important;
    box-shadow: 0 8px 22px rgba(32, 27, 21, 0.06) !important;
}

body:not(.app-not-authenticated) #tasks-view .task-card-title-block h4,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card-title-block h4,
body:not(.app-not-authenticated) #tasks-view .task-card-description,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card-description,
body:not(.app-not-authenticated) #tasks-view .task-card-date,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card-date,
body:not(.app-not-authenticated) #tasks-view .task-card-assignee,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card-assignee {
    color: #2f2a24 !important;
}

body:not(.app-not-authenticated) #tasks-view .task-card-description,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card-description,
body:not(.app-not-authenticated) #tasks-view .task-card-title-block h4,
body:not(.app-not-authenticated) #assigned-tasks-view .task-card-title-block h4 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

body:not(.app-not-authenticated) #tasks-view .task-status-tag,
body:not(.app-not-authenticated) #assigned-tasks-view .task-status-tag {
    background: #f8f5f2 !important;
    color: #4a3c31 !important;
    border: 1px solid #e2d9d1 !important;
}

body:not(.app-not-authenticated) #tasks-view .task-status-completed,
body:not(.app-not-authenticated) #assigned-tasks-view .task-status-completed {
    background: #e9f8ef !important;
    color: #166534 !important;
    border-color: #86d7a4 !important;
}

body:not(.app-not-authenticated) #tasks-view .task-completed-label,
body:not(.app-not-authenticated) #assigned-tasks-view .task-completed-label {
    color: #166534 !important;
    background: #e9f8ef !important;
    border: 1px solid #86d7a4 !important;
    border-radius: 999px !important;
    padding: 0.35rem 0.7rem !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

body:not(.app-not-authenticated) .report-signature-tab {
    background: #f8fafc !important;
    color: #4a3c31 !important;
    border-color: #e2d9d1 !important;
}

body:not(.app-not-authenticated) .report-signature-tab.is-active {
    background: #faf1f3 !important;
    color: #4a1420 !important;
    border-color: #e3c5cb !important;
}

body:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .rlbl,
body:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .rval:not(.total),
body:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .logistica-info,
body:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .logistica-info b {
    color: #4a3c31 !important;
}
.inspection-question-title {
  font-weight: 500;
  margin-bottom: 12px;
  color: #fff;
  font-size: 1.05rem;
}
.inspection-toggle-group {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.inspection-toggle-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: bold;
}
.inspection-toggle-btn:hover {
  filter: brightness(1.2);
}
.inspection-toggle-btn.active[data-value="SI"] { background: #1f8538; color: white; border-color: #1f8538; }
.inspection-toggle-btn.active[data-value="NO"] { background: #b02a37; color: white; border-color: #b02a37; }
.inspection-toggle-btn.active[data-value="N/A"] { background: #6b5a4c; color: white; border-color: #6b5a4c; }
.inspection-toggle-btn.active[data-value="NOTA"] { background: #d9a62e; color: black; border-color: #d9a62e; }

.inspection-nota-panel {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  animation: fadeIn 0.3s ease-in-out;
}
.inspection-nota-panel.show {
  display: block;
}

/* Mejoras Select M�ltiple Planificador */
select[multiple] {
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    scrollbar-width: thin;
    overflow-y: auto;
}
select[multiple] option {
    padding: 0.75rem 1rem;
    margin-bottom: 2px;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
select[multiple] option:hover {
    background: rgba(255, 255, 255, 0.05);
}
select[multiple] option:checked {
    background: var(--primary-color) linear-gradient(0deg, var(--primary-color) 0%, var(--primary-color) 100%);
    color: #fff;
    font-weight: 500;
}

/* =========================================================
   SISTEMA DE BOTONES - MGM Gestor
   ========================================================= */

/* Base */
.btn {
    padding: 0.7rem 1.25rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #5c1a28 0%, #9c4453 100%);
    color: #fff;
    border: 1px solid rgba(249, 115, 22, 0.5);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

.btn:hover,
.btn:focus-visible {
    background: linear-gradient(135deg, #9c4453 0%, #5c1a28 100%);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    outline: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(249, 115, 22, 0.3);
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Outline */
.btn-outline {
    background: rgba(249, 115, 22, 0.08);
    color: #5c1a28;
    border: 1px solid rgba(249, 115, 22, 0.4);
    box-shadow: none;
}

.btn-outline::after { display: none; }

.btn-outline:hover,
.btn-outline:focus-visible {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.65);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

/* Ghost / Neutral */
.btn-ghost {
    background: rgba(148, 163, 184, 0.08);
    color: #a89686;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: none;
}

.btn-ghost::after { display: none; }

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(148, 163, 184, 0.15);
    color: #efe9e3;
    border-color: rgba(148, 163, 184, 0.35);
    transform: translateY(-1px);
}

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-danger::after { display: none; }

.btn-danger:hover,
.btn-danger:focus-visible {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

/* Success */
.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-success::after { display: none; }

.btn-success:hover,
.btn-success:focus-visible {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

/* Tamao pequeno */
.btn-sm {
    padding: 0.38rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 0.65rem;
    gap: 0.35rem;
}

.btn-sm svg {
    width: 14px;
    height: 14px;
}

/* Icono compacto */
.btn-icon {
    padding: 0.6rem;
    border-radius: 0.75rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.88rem;
}

/* =========================================================
   BOTONES DE ACCION EN TARJETAS
   ========================================================= */

/* Completar tarea */
.task-complete-btn {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #86efac;
    border-radius: 0.75rem;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.task-complete-btn::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.task-complete-btn:hover,
.task-complete-btn:focus-visible {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(22, 163, 74, 0.25) 100%);
    border-color: rgba(34, 197, 94, 0.75);
    color: #bbf7d0;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.25);
    transform: translateY(-1px);
    outline: none;
}

/* Acusar recibo */
.task-ack-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #93c5fd;
    border-radius: 0.75rem;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.task-ack-btn::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.task-ack-btn:hover,
.task-ack-btn:focus-visible {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(37, 99, 235, 0.25) 100%);
    border-color: rgba(59, 130, 246, 0.75);
    color: #bfdbfe;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
    outline: none;
}

/* Eliminar equipo */
.equipment-remove-btn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    border-radius: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.1);
}

.equipment-remove-btn::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.equipment-remove-btn:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #ef4444;
    color: #fff;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

/* Botones icono en reporte */
.report-card-actions-btn {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.65rem;
    color: #a89686;
    cursor: pointer;
    padding: 0.45rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.report-card-actions-btn svg {
    width: 18px;
    height: 18px;
}

.report-card-actions-btn:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
    color: #5c1a28;
    transform: translateY(-1px);
}

.report-card-actions-btn.is-loading,
.report-card-actions-btn:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

/* Botones foto de equipo */
.equipment-photo-btn {
    flex: 1;
    padding: 0.42rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #a89686;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.equipment-photo-btn:hover:not(:disabled) {
    border-color: rgba(249, 115, 22, 0.5);
    background: rgba(249, 115, 22, 0.1);
    color: #5c1a28;
    transform: translateY(-1px);
}

.equipment-photo-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Eliminar tarea del planificador */
.planner-task-delete {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    cursor: pointer;
    padding: 0.3rem 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s ease;
}

.planner-task-delete::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.planner-task-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================================
   MENU DE ACCIONES CONTEXTUAL
   ========================================================= */
.actions-menu {
    position: absolute;
    top: 50px;
    right: 20px;
    background: rgba(17, 24, 39, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.95rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.4rem;
    min-width: 170px;
}

.actions-menu button {
    background: none;
    border: none;
    color: #a89686;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 0.65rem;
    transition: all 0.15s ease;
}

.actions-menu button:hover {
    background: rgba(249, 115, 22, 0.12);
    color: #efe9e3;
}

.actions-menu button.danger {
    color: #fca5a5;
}

.actions-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.actions-menu button svg {
    width: 16px;
    height: 16px;
    opacity: 0.75;
    flex-shrink: 0;
}

.actions-menu button:hover svg {
    opacity: 1;
}

/* =========================================================
   COTIZADOR (NOVEDADES -> EXCEL)
   ========================================================= */
#cotizador-modal .modal-content.cotizador-modal-content {
    width: min(980px, calc(100% - 1rem));
    height: min(96vh, 1050px);
}

#cotizador-modal #cotizador-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#cotizador-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#cotizador-modal .cotizador-ui {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 12px;
}

#cotizador-modal .cotizador-ui .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #250e13;
    border: 1px solid #491c25;
    border-radius: 14px;
    margin-bottom: 16px;
}

#cotizador-modal .cotizador-ui .logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

#cotizador-modal .cotizador-ui .logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #5c1a28;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}

#cotizador-modal .cotizador-ui .logo-text h1 {
    font-size: 15px;
    font-weight: 700;
    color: #efe9e3;
    margin: 0;
}

#cotizador-modal .cotizador-ui .logo-text p {
    font-size: 11px;
    color: #a89686;
    margin: 0;
}

#cotizador-modal .cotizador-ui .header-badge {
    font-size: 10px;
    font-weight: 500;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #5c1a28;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

#cotizador-modal .cotizador-ui .section {
    background: #250e13;
    border: 1px solid #491c25;
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}

#cotizador-modal .cotizador-ui .section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #491c25;
    background: #38121a;
}

#cotizador-modal .cotizador-ui .section-num {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #5c1a28;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#cotizador-modal .cotizador-ui .section-head h2 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #efe9e3;
    margin: 0;
}

#cotizador-modal .cotizador-ui .section-head p {
    font-size: 11px;
    color: #a89686;
    margin: 0 0 0 auto;
}

#cotizador-modal .cotizador-ui .section-body {
    padding: 20px;
}

#cotizador-modal .cotizador-ui .fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

#cotizador-modal .cotizador-ui .field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#cotizador-modal .cotizador-ui .field-full {
    grid-column: 1 / -1;
}

#cotizador-modal .cotizador-ui .field label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a89686;
    display: flex;
    align-items: center;
    gap: 5px;
}

#cotizador-modal .cotizador-ui .cell-ref {
    font-size: 9px;
    font-weight: 500;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.25);
    color: #5c1a28;
    padding: 1px 5px;
    border-radius: 4px;
}

#cotizador-modal .cotizador-ui input,
#cotizador-modal .cotizador-ui select,
#cotizador-modal .cotizador-ui textarea {
    background: #43161f;
    border: 1px solid #4a3c31;
    color: #efe9e3;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 9px;
    outline: none;
    width: 100%;
}

#cotizador-modal .cotizador-ui textarea {
    min-height: 60px;
    resize: vertical;
}

#cotizador-modal .cotizador-ui input[readonly] {
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

#cotizador-modal .cotizador-ui .services-search-wrap {
    position: relative;
    margin-bottom: 10px;
}

#cotizador-modal .cotizador-ui .services-search-wrap input {
    padding-left: 36px;
}

#cotizador-modal .cotizador-ui .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #a89686;
    pointer-events: none;
}

#cotizador-modal .cotizador-ui .autocomplete-list {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #38121a;
    border: 1px solid #4a3c31;
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: none;
}

#cotizador-modal .cotizador-ui .autocomplete-list.open {
    display: block;
}

#cotizador-modal .cotizador-ui .ac-item {
    padding: 8px 12px;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    background: transparent;
    color: #efe9e3;
    border-bottom: 1px solid rgba(37, 48, 64, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

#cotizador-modal .cotizador-ui .ac-item:last-child {
    border-bottom: none;
}

#cotizador-modal .cotizador-ui .ac-item:hover,
#cotizador-modal .cotizador-ui .ac-item.selected {
    background: rgba(249, 115, 22, 0.12);
}

#cotizador-modal .cotizador-ui .ac-code {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e8c063;
    flex-shrink: 0;
    min-width: 58px;
}

#cotizador-modal .cotizador-ui .ac-empty {
    margin: 0;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.45;
    color: #d9c9bd;
}

#cotizador-modal .cotizador-ui .ac-name {
    font-size: 12px;
    color: #efe9e3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cotizador-modal .cotizador-ui .ac-equipo {
    font-size: 10px;
    color: #efe9e3;
    font-weight: 600;
    flex-shrink: 0;
}

#cotizador-modal .cotizador-ui .services-table,
#cotizador-modal .cotizador-ui .materiales-table {
    width: 100%;
    border-collapse: collapse;
}

#cotizador-modal .cotizador-ui .services-table thead tr {
    background: #38121a;
}

#cotizador-modal .cotizador-ui .services-table thead th,
#cotizador-modal .cotizador-ui .materiales-table thead th {
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a89686;
    text-align: left;
    border-bottom: 1px solid #4a3c31;
}

#cotizador-modal .cotizador-ui .services-table tbody tr {
    border-bottom: 1px solid #491c25;
}

#cotizador-modal .cotizador-ui .services-table td,
#cotizador-modal .cotizador-ui .materiales-table td {
    padding: 7px 10px;
    font-size: 12px;
    vertical-align: middle;
}

#cotizador-modal .cotizador-ui .td-code {
    color: #5c1a28;
    font-size: 11px;
}

#cotizador-modal .cotizador-ui .td-actividad {
    color: #efe9e3;
}

#cotizador-modal .cotizador-ui .td-equipo {
    color: #a89686;
    font-size: 11px;
}

#cotizador-modal .cotizador-ui .td-valor {
    color: #efe9e3;
    text-align: right;
}

#cotizador-modal .cotizador-ui .td-total {
    color: #22c55e;
    font-weight: 600;
    text-align: right;
}

#cotizador-modal.reportar-tech-mode .cotizador-tech-hide {
    display: none !important;
}

#cotizador-modal.reportar-tech-mode .services-table th.cotizador-price-col,
#cotizador-modal.reportar-tech-mode .services-table td.cotizador-price-col,
#cotizador-modal.reportar-tech-mode .materiales-table th.cotizador-price-col,
#cotizador-modal.reportar-tech-mode .materiales-table td.cotizador-price-col {
    display: none !important;
}

#cotizador-modal .cotizador-ui .td-cant input {
    width: 68px;
    padding: 5px 8px;
    text-align: center;
    min-height: auto;
}

#cotizador-modal .cotizador-ui .td-del button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b5a4c;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 14px;
}

#cotizador-modal .cotizador-ui .td-del button:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

#cotizador-modal .cotizador-ui .empty-row td {
    text-align: center;
    padding: 22px;
    color: #6b5a4c;
    font-size: 12px;
    font-style: italic;
}

#cotizador-modal .cotizador-ui .empty-row.hidden {
    display: none;
}

#cotizador-modal .cotizador-ui .add-service-btn,
#cotizador-modal .cotizador-ui .add-mat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    border: 1px dashed #4a3c31;
    background: transparent;
    color: #a89686;
    cursor: pointer;
    font-size: 12px;
}

#cotizador-modal .cotizador-ui .add-service-btn:hover,
#cotizador-modal .cotizador-ui .add-mat-btn:hover {
    border-color: rgba(249, 115, 22, 0.4);
    color: #5c1a28;
    background: rgba(249, 115, 22, 0.12);
}

/* ===== Sección 5 Materiales estructurados ===== */
#cotizador-modal .cot-mat-struct-table th {
    background: #3e111a;
    color: #a89686;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 8px;
}

#cotizador-modal .cot-mat-struct-table td {
    padding: 5px 6px;
    vertical-align: middle;
}

#cotizador-modal .cot-mat-struct-table input,
#cotizador-modal .cot-mat-struct-table select {
    width: 100%;
    background: #270a10;
    border: 1px solid #4a3c31;
    border-radius: 6px;
    color: #efe9e3;
    padding: 5px 8px;
    font-size: 12px;
}

#cotizador-modal .cot-mat-struct-table input[type="number"] {
    text-align: right;
}

.cot-mat-total-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(232, 80, 10, 0.10);
    border: 1px solid rgba(232, 80, 10, 0.25);
    border-radius: 8px;
}

.cot-mat-total-label {
    font-size: 12px;
    font-weight: 600;
    color: #a89686;
}

.cot-mat-total-val {
    font-size: 16px;
    font-weight: 800;
    color: #4a1420;
    min-width: 40px;
    text-align: right;
}

#cotizador-modal .cotizador-ui .logistica-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

#cotizador-modal .cotizador-ui .logistica-info {
    grid-column: 1 / -1;
    background: #43161f;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 11px;
    color: #a89686;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#cotizador-modal .cotizador-ui .logistica-info b {
    color: #efe9e3;
}

#cotizador-modal .cotizador-ui .resumen-box {
    background: #38121a;
    border: 1px solid #491c25;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 8px;
}

#cotizador-modal .cotizador-ui .resumen-items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

#cotizador-modal .cotizador-ui .res-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#cotizador-modal .cotizador-ui .rlbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a89686;
    font-weight: 600;
}

#cotizador-modal .cotizador-ui .rval {
    font-size: 14px;
    font-weight: 600;
    color: #efe9e3;
}

#cotizador-modal .cotizador-ui .rval.total {
    color: #5c1a28;
    font-size: 18px;
}

#cotizador-modal .cotizador-ui .resumen-divider {
    width: 1px;
    height: 40px;
    background: #4a3c31;
}

#cotizador-modal .generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5c1a28, #73202f);
    border: 1px solid rgba(249, 115, 22, 0.5);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.35);
}

#cotizador-modal .cotizador-footer-actions {
    display: flex;
    gap: 0.8rem;
    width: 100%;
}

#cotizador-modal .cotizador-footer-actions .btn,
#cotizador-modal .cotizador-footer-actions .generate-btn {
    flex: 1;
}

@media (max-width: 760px) {
    #cotizador-modal .cotizador-footer-actions {
        flex-direction: column;
    }

    #cotizador-modal .modal-content.cotizador-modal-content {
        width: calc(100% - 0.4rem);
        height: 98vh;
    }

    #cotizador-modal .cotizador-ui .fields-grid,
    #cotizador-modal .cotizador-ui .logistica-grid {
        grid-template-columns: 1fr;
    }

    #cotizador-modal .cotizador-ui .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }
}

/* =========================================================
   TABLA PERFILES - MGM Gestor
   Reemplaza los estilos de .data-table en el tab-perfiles
   ========================================================= */

.profiles-section {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 1.25rem;
    overflow: hidden;
}

.profiles-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(15, 23, 42, 0.4);
}

.profiles-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.01em;
}

.profiles-section-title svg {
    color: var(--brand-primary);
    opacity: 0.85;
}

.profiles-count {
    background: rgba(249, 115, 22, 0.12);
    color: #9c4453;
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    letter-spacing: 0.03em;
}

.profiles-table-wrapper {
    overflow-x: auto;
}

.profiles-table {
    width: 100%;
    border-collapse: collapse;
}

.profiles-table thead tr {
    background: rgba(15, 23, 42, 0.55);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.profiles-table thead th {
    padding: 0.7rem 1.1rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}

.profiles-table tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
    transition: background 0.15s ease;
}

.profiles-table tbody tr:last-child {
    border-bottom: none;
}

.profiles-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.04);
}

.profiles-table td {
    padding: 0.8rem 1.1rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

.reportar-table .reportar-cell-fecha,
.reportar-table .reportar-cell-equipo,
.reportar-table .reportar-cell-cliente {
    font-weight: 600;
}

.reportar-table .reportar-cell-actividad,
.reportar-table .reportar-cell-novedad {
    max-width: 420px;
    word-break: break-word;
}

.reportar-table .reportar-cell-acciones .profile-actions {
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .reportar-table thead {
        display: none;
    }

    .reportar-table tbody tr.reportar-row {
        display: block;
        margin: 0.75rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 0.9rem;
        background: rgba(15, 23, 42, 0.6);
    }

    .reportar-table tbody td.reportar-cell {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        width: 100%;
        padding: 0.58rem 0.85rem;
        border: none;
    }

    .reportar-table tbody td.reportar-cell::before {
        content: attr(data-label);
        min-width: 82px;
        color: var(--text-muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding-top: 0.1rem;
    }

    .reportar-table .reportar-cell-acciones .profile-actions {
        margin-left: auto;
        width: 100%;
        justify-content: flex-end;
    }
}

.profile-user-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249,115,22,0.3) 0%, rgba(234,107,10,0.2) 100%);
    border: 1px solid rgba(249, 115, 22, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9c4453;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.profile-name {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.875rem;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.role-admin      { background: rgba(139,92,246,0.14); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3); }
.role-tecnico    { background: rgba(59,130,246,0.14); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.role-gerente    { background: rgba(234,179,8,0.14); color: #e5bb5c; border: 1px solid rgba(234,179,8,0.3); }
.role-auxiliar   { background: rgba(249,115,22,0.14); color: #9c4453; border: 1px solid rgba(249,115,22,0.3); }

.zona-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.2);
    white-space: nowrap;
}

.profile-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border-radius: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.1);
    color: #9c4453;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.btn-edit:hover {
    background: linear-gradient(135deg, #5c1a28 0%, #9c4453 100%);
    border-color: #5c1a28;
    color: #fff;
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.35);
    transform: translateY(-1px);
}

.btn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(148, 163, 184, 0.07);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-action-icon:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
    color: var(--brand-primary);
    transform: translateY(-1px);
}

.btn-action-icon.danger:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.btn-action-icon svg {
    width: 14px;
    height: 14px;
}

/* =========================================================
   TABLERO GENERAL DE EQUIPOS
   ========================================================= */
.gb-layout {
    display: flex;
    height: min(78vh, calc(100vh - 220px));
    min-height: 560px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.75);
}

#gb-map-full {
    flex: 1;
    height: 100%;
    z-index: 1;
}

.gb-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.92) 0%, rgba(17, 24, 39, 0) 100%);
    pointer-events: none;
}

.gb-topbar-left,
.gb-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    pointer-events: all;
}

.gb-title-block h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.gb-title-block p {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: rgba(229, 231, 235, 0.7);
}

.gb-title-block {
    pointer-events: none;
}

.gb-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-light);
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    backdrop-filter: blur(8px);
}

.gb-stat span {
    color: #9c4453;
    font-weight: 700;
}

.gb-add-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(249, 115, 22, 0.5);
    background: linear-gradient(135deg, #5c1a28, #9c4453);
    color: #fff;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
    transition: all 0.2s ease;
    font-family: inherit;
}

.gb-add-fab:hover {
    background: linear-gradient(135deg, #9c4453, #5c1a28);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

.gb-panel {
    width: 360px;
    height: 100%;
    background: rgba(17, 24, 39, 0.97);
    border-left: 1px solid rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    z-index: 400;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.gb-panel.collapsed {
    transform: translateX(100%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.gb-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem 1.1rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    flex-shrink: 0;
}

.gb-tab {
    flex: 1;
    padding: 0.45rem 0.5rem;
    border-radius: 0.6rem 0.6rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    font-family: inherit;
}

.gb-tab.active {
    color: #9c4453;
    border-bottom-color: #5c1a28;
}

.gb-tab-content {
    display: none;
    flex-direction: column;
    min-height: 0;
}

.gb-tab-content.active {
    display: flex;
    flex: 1;
}

.gb-panel-header {
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.gb-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.gb-panel-title svg {
    color: var(--brand-primary);
}

.gb-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.gb-panel-close:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.gb-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 115, 22, 0.3) transparent;
}

.gb-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gb-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.gb-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-light);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gb-input:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.gb-mini-map-wrap {
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    height: 180px;
    position: relative;
}

#gb-panel-map {
    width: 100%;
    height: 100%;
}

.gb-map-hint {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.82);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    color: #9c4453;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.gb-gps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.08);
    color: #9c4453;
    transition: all 0.2s ease;
    font-family: inherit;
}

.gb-gps-btn:hover {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.65);
    color: #fff;
}

.gb-upload {
    border: 1.5px dashed rgba(148, 163, 184, 0.25);
    border-radius: 0.85rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.gb-upload:hover {
    border-color: rgba(249, 115, 22, 0.5);
    background: rgba(249, 115, 22, 0.05);
}

.gb-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.gb-upload p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.gb-panel-footer {
    padding: 0.85rem 1.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    flex-shrink: 0;
}

.gb-submit-btn {
    width: 100%;
    padding: 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(249, 115, 22, 0.5);
    background: linear-gradient(135deg, #5c1a28, #9c4453);
    color: #fff;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gb-submit-btn:hover {
    background: linear-gradient(135deg, #9c4453, #5c1a28);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.gb-eq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gb-eq-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gb-eq-item:hover {
    background: rgba(249, 115, 22, 0.06);
    border-color: rgba(249, 115, 22, 0.25);
}

.gb-eq-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5c1a28;
    flex-shrink: 0;
}

.gb-eq-info {
    flex: 1;
    min-width: 0;
}

.gb-eq-info strong {
    font-size: 0.82rem;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gb-eq-info span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.custom-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.cluster-sm {
    width: 36px;
    height: 36px;
    background: rgba(249, 115, 22, 0.9);
    font-size: 0.78rem;
}

.cluster-md {
    width: 46px;
    height: 46px;
    background: rgba(234, 88, 12, 0.92);
    font-size: 0.85rem;
}

.cluster-lg {
    width: 56px;
    height: 56px;
    background: rgba(194, 65, 12, 0.95);
    font-size: 0.9rem;
}

.eq-popup .leaflet-popup-content-wrapper {
    background: rgba(17, 24, 39, 0.96) !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    padding: 0 !important;
}

.eq-popup .leaflet-popup-content {
    margin: 0 !important;
    color: #efe9e3 !important;
    font-family: var(--mgm-sans);
    min-width: 200px;
}

.eq-popup .leaflet-popup-tip {
    background: rgba(17, 24, 39, 0.95) !important;
}

.eq-popup .leaflet-popup-close-button {
    color: #a89686 !important;
    top: 8px !important;
    right: 10px !important;
}

.popup-body {
    padding: 0.85rem 1rem;
}

.popup-body h4 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: #fff;
}

.popup-code {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(249, 115, 22, 0.12);
    color: #9c4453;
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
}

.popup-zone {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
}

.popup-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.42rem;
    border-radius: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.1);
    color: #9c4453;
    transition: all 0.18s ease;
    font-family: inherit;
}

.popup-edit-btn:hover {
    background: linear-gradient(135deg, #5c1a28, #9c4453);
    color: #fff;
    border-color: #5c1a28;
}

.gb-eq-tooltip.leaflet-tooltip {
    background: rgba(17, 24, 39, 0.96);
    border: 1px solid rgba(249, 115, 22, 0.55);
    color: #f8fafc;
    border-radius: 999px;
    padding: 0.24rem 0.62rem;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.gb-eq-tooltip.leaflet-tooltip-top::before {
    border-top-color: rgba(249, 115, 22, 0.55);
}

@media (max-width: 900px) {
    .gb-layout {
        height: calc(100vh - 220px);
        min-height: 500px;
    }
}

@media (max-width: 640px) {
    .gb-layout {
        height: calc(100vh - 170px);
        min-height: 540px;
        border-radius: 0.95rem;
    }

    #gb-map-full {
        height: 100%;
    }

    .gb-topbar {
        padding: 0.55rem 0.6rem;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .gb-topbar-right {
        margin-left: auto;
        gap: 0.45rem;
    }

    .gb-stat {
        padding: 0.22rem 0.48rem;
        font-size: 0.68rem;
    }

    .gb-add-fab {
        padding: 0.45rem 0.7rem;
        border-radius: 0.68rem;
        font-size: 0.74rem;
        gap: 0.35rem;
    }

    .gb-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        height: min(78vh, 640px);
        max-height: 82%;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.42);
        z-index: 540;
    }

    .gb-panel.collapsed {
        transform: translateY(102%);
        top: auto;
        right: 0;
        left: 0;
    }

    .gb-tabs {
        padding: 0.6rem 0.85rem 0;
    }

    .gb-panel-header {
        padding: 0.78rem 0.85rem 0.68rem;
    }

    .gb-panel-body {
        padding: 0.78rem 0.85rem 0.95rem;
    }

    .gb-mini-map-wrap {
        height: 132px;
    }

    .gb-panel-footer {
        padding: 0.65rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom));
    }

    .gb-submit-btn {
        padding: 0.72rem;
        font-size: 0.84rem;
    }

    .gb-title-block h2 {
        font-size: 0.84rem;
        line-height: 1.2;
        max-width: 140px;
    }

    .gb-title-block p {
        display: none;
    }
}

/* =========================================================
   AJUSTES GLOBALES MOVIL
   ========================================================= */
@media (max-width: 768px) {
    #main-content {
        padding: 0.75rem;
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .section-header .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .card,
    .dashboard-wrapper {
        padding: 0.85rem;
    }

    .form-grid,
    .equipment-form-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: calc(100% - 1rem);
        max-height: 92vh;
        border-radius: 0.95rem;
    }

    .equipment-view-header {
        padding: 0.85rem;
        gap: 0.75rem;
    }

    .equipment-view-title {
        width: 100%;
        flex-wrap: wrap;
    }

    .equipment-view-actions {
        width: 100%;
    }

    .equipment-search-wrapper {
        width: 100%;
        min-width: 0;
    }

    .equipment-submenu-wrapper {
        flex: 1 1 calc(50% - 0.4rem);
    }

    .equipment-submenu-toggle {
        width: 100%;
        min-width: 0;
    }

    .equipment-submenu-panel {
        right: auto;
        left: 0;
        width: 100%;
    }

    .equipment-view-actions .btn {
        flex: 1 1 calc(50% - 0.4rem);
    }

    .equipment-plant-map-layout {
        grid-template-columns: 1fr;
    }

    .equipment-plant-map-canvas {
        min-height: 340px;
    }

    .equipment-plant-map-sidebar {
        min-height: 0;
    }

    .equipment-context-card-header {
        flex-direction: column;
    }

    .profiles-table-wrapper,
    .table-wrapper {
        overflow-x: auto;
    }
}

/* =========================================================
   GESTION PANEL
   ========================================================= */
.pg-wrap {
    background: linear-gradient(180deg, #350f17 0%, #2f0d14 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    padding: 1.1rem 1.2rem 1.2rem;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pg-header-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.pg-header-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: rgba(232, 98, 42, 0.16);
    color: #5c1a28;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pg-header-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

.pg-title {
    font-size: 1rem;
    font-weight: 700;
    color: #eef2ff;
    letter-spacing: -0.01em;
}

.pg-subtitle {
    margin-top: 0.12rem;
    font-size: 0.82rem;
    color: #a89686;
}

.pg-count {
    font-size: 0.72rem;
    color: #8a7767;
    white-space: nowrap;
}

.pg-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.55rem;
}

.pg-card {
    background: #3b131b;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.95rem;
    padding: 0.78rem 0.38rem 0.7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 5.6rem;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    user-select: none;
}

.pg-card:hover {
    background: #461620;
    border-color: rgba(232, 98, 42, 0.4);
    transform: translateY(-2px);
}

.pg-card:active {
    transform: translateY(0);
}

.pg-card.gestion-tab-btn.active {
    background: linear-gradient(180deg, #491822 0%, #3f141d 100%);
    border-color: rgba(232, 98, 42, 0.55);
    box-shadow: 0 0 0 1px rgba(232, 98, 42, 0.18) inset;
}

.pg-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pg-card-icon svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.pg-card-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #edf2ff;
    text-align: center;
    line-height: 1.18;
}

.pg-card-label small {
    font-size: 0.58rem;
    font-weight: 500;
    color: #a89686;
}

.pg-icon-orange {
    background: rgba(232, 98, 42, 0.15);
    color: #5c1a28;
}

.pg-icon-blue {
    background: rgba(79, 124, 255, 0.15);
    color: #4f7cff;
}

.pg-icon-green {
    background: rgba(46, 196, 107, 0.15);
    color: #2ec46b;
}

.pg-icon-purple {
    background: rgba(199, 125, 255, 0.15);
    color: #c77dff;
}

.pg-icon-amber {
    background: rgba(255, 180, 0, 0.15);
    color: #d9a62e;
}

.pg-icon-teal {
    background: rgba(46, 196, 180, 0.15);
    color: #2ec4b6;
}

.pg-icon-red {
    background: rgba(255, 92, 92, 0.15);
    color: #ff5c5c;
}

@media (max-width: 1180px) {
    .pg-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .pg-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pg-wrap {
        padding: 0.95rem;
    }

    .pg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .pg-card {
        min-height: 6.4rem;
        padding: 0.85rem 0.55rem 0.75rem;
    }

    .pg-card-icon {
        width: 2.7rem;
        height: 2.7rem;
    }

    .pg-card-label {
        font-size: 0.8rem;
    }
}

/* MGM MVP claro: overrides visuales, sin cambiar la logica de Reportar/Informe. */
:root {
    --bg-dark: #f4f3ef;
    --bg-dark-accent: #ffffff;
    --brand-primary: #4a1420;
    --brand-primary-hover: #5c1a28;
    --text-light: #17120f;
    --text-muted: #4a4742;
    --border-color: #dedbd2;
    --success-color: #168a4a;
    --danger-color: #c83c2e;
    --warning-color: #a87d1c;
    --surface: #ffffff;
    --surface-soft: #fbfaf7;
    --surface-muted: #ebe9e3;
    --ink: #241c17;
    --ink-soft: #56534c;
    --accent-soft: #faf1f3;
    --shadow-soft: 0 16px 38px rgba(32, 27, 21, 0.09);
}

html {
    background: var(--bg-dark);
}

body {
    background: var(--bg-dark);
    color: var(--ink);
}

body.app-not-authenticated {
    background: #0d0708;
}

body.app-not-authenticated #login-section::after {
    content: none;
    background: none;
}

body.app-not-authenticated .login-panel {
    position: relative;
    z-index: 1;
    background: rgba(8, 10, 14, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 20px;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.app-not-authenticated .login-header h1,
body.app-not-authenticated .login-header p,
body.app-not-authenticated .login-panel label {
    color: #ffffff;
}

body.app-not-authenticated .login-header h1 {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.38);
    letter-spacing: 0;
}

body.app-not-authenticated .login-header p {
    color: rgba(255, 255, 255, 0.82);
}

body.app-not-authenticated .login-panel input,
body.app-not-authenticated .login-panel select,
body.app-not-authenticated .login-panel textarea {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

body.app-not-authenticated .login-panel button[type="submit"] {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(255, 91, 31, 0.22);
}

#main-app {
    background:
        linear-gradient(180deg, rgba(255, 240, 232, 0.68), rgba(244, 243, 239, 0) 280px),
        var(--bg-dark);
}

#sidebar {
    background: #ffffff;
    border-right: 1px solid #f0ece6;
    box-shadow: 4px 0 18px rgba(32, 27, 21, 0.06);
    color: var(--ink);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f0ece6;
    border-radius: 0;
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #5c1a28;
    background: #faf1f3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.brand-mark img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    padding: 0;
    background: transparent;
    object-fit: contain;
}

.sidebar-brand strong,
.brand-name {
    color: #1a1612;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.brand-sub {
    color: var(--mgm-texto-apagado);
    font-size: 11px;
    line-height: 1.2;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fafaf9;
    border-bottom: 1px solid #f0ece6;
    cursor: default;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e3c5cb;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-initial {
    font-size: 15px;
    font-weight: 700;
    color: #5c1a28;
    line-height: 1;
    text-transform: uppercase;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    color: #1a1612;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand .badge,
.user-role,
#sidebar-user {
    color: var(--mgm-texto-apagado);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    padding: 0;
    border: 0;
}

.sidebar-user-chevron {
    width: 14px;
    height: 14px;
    color: #ccc;
    flex-shrink: 0;
}

.nav-link {
    color: #555;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    gap: 8px;
}

.nav-link:hover {
    background: #f7f5f3;
    border-color: #e8e4de;
    color: #1a1612;
}

.nav-link.active {
    background: #faf1f3;
    color: #5c1a28;
    border-color: rgba(232, 93, 38, 0.18);
    box-shadow: none;
}

.nav-link .nav-icon {
    background: transparent;
    color: currentColor;
}

.nav-link.active .nav-icon {
    background: transparent;
    color: #5c1a28;
}

.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid #f0ece6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Botón asistente IA en el sidebar */
.sidebar-assistant-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3f171f 0%, #2c0c12 100%);
    color: #9c4453;
    border: 1px solid rgba(249,115,22,0.28);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(15,23,42,0.18), 0 0 0 0 rgba(249,115,22,0);
    transition: background 0.18s, box-shadow 0.18s, transform 0.14s;
    letter-spacing: 0.01em;
}
.sidebar-assistant-btn i {
    font-size: 18px;
    flex-shrink: 0;
}
.sidebar-assistant-btn span {
    color: #efe9e3;
}
.sidebar-assistant-btn:hover {
    background: linear-gradient(135deg, #4a3c31 0%, #3f171f 100%);
    box-shadow: 0 4px 14px rgba(15,23,42,0.22), 0 0 0 2px rgba(249,115,22,0.22);
    transform: translateY(-1px);
}
.sidebar-assistant-btn:active { transform: translateY(0); }

/* Botón diagnóstico — esquina inferior del sidebar footer */
.sidebar-diag-corner {
    align-self: flex-end;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border-color, #dedbd2);
    color: var(--ink-soft, #9a9793);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    opacity: 0.55;
    margin-bottom: 2px;
}
.sidebar-diag-corner:hover { background: var(--brand-primary, #4a1420); color: #fff; border-color: var(--brand-primary, #4a1420); opacity: 1; }
.sidebar-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-muted, #ebe9e3);
    border: 1.5px solid var(--border-color, #dedbd2);
    color: var(--ink-soft, #56534c);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.sidebar-icon-btn:hover { background: var(--brand-primary, #4a1420); color: #fff; }
.sidebar-icon-btn svg { width: 22px; height: 22px; }

/* Burbuja flotante arrastrable del asistente */
.btn-asistente-logo {
    position: fixed;
    bottom: 100px;
    right: 16px;
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    cursor: grab;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.btn-asistente-logo:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.btn-asistente-logo:active { cursor: grabbing; }
.btn-asistente-logo img {
    width: 112%;
    height: 112%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
    margin: -6%;
}

.logout-btn,
#logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    color: #888;
    background: transparent;
    border: 1px solid #e8e4de;
    cursor: pointer;
    box-shadow: none;
    font-size: 13px;
}

.logout-btn:hover,
#logout-btn:hover {
    background: #faf1f3;
    color: #5c1a28;
    border-color: rgba(232, 93, 38, 0.25);
}

#main-content {
    background: transparent;
    color: var(--ink);
}

#main-content > .section-header,
.card,
.dashboard-card,
.reports-hero,
.report-card,
.profiles-section,
.planner-calendar-panel,
.planner-sidebar,
.time-map-card,
.modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

#main-content > .section-header {
    padding: 0.9rem 1rem;
}

.section-header,
.section-title-block h2,
.section-header h3,
.card h3,
.card h4,
.reports-hero-copy h3,
.report-card-info h4,
.planner-task-title,
.planner-current-month,
.profiles-section-title,
.modal-header h3 {
    color: var(--ink);
}

.section-subtitle,
.muted-text,
.report-card-info p,
.report-card-meta-item span,
.planner-task-meta,
.planner-calendar-subtitle {
    color: var(--text-muted);
}

.btn,
.btn-primary,
.generate-btn {
    border-radius: 8px;
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(255, 91, 31, 0.18);
}

.btn:hover,
.btn:focus-visible,
.generate-btn:hover,
.generate-btn:focus-visible {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-outline,
.btn-ghost,
.modal-close-btn,
.reports-status-filter,
.planner-nav-btn {
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.btn-outline:hover,
.btn-outline:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible,
.modal-close-btn:hover,
.reports-status-filter:hover,
.planner-nav-btn:hover {
    background: var(--accent-soft);
    color: var(--brand-primary);
    border-color: rgba(255, 91, 31, 0.3);
}

input,
select,
textarea,
.form-control,
.report-builder-field input,
.report-builder-field select,
.report-builder-field textarea,
.form-group input,
.form-group select,
.form-group textarea {
    background: #ffffff;
    color: var(--ink);
    border-color: var(--border-color);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.report-builder-field input:focus,
.report-builder-field select:focus,
.report-builder-field textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 91, 31, 0.12);
    outline: none;
}

.reports-shell {
    color: var(--ink);
}

.reports-hero {
    background:
        linear-gradient(135deg, rgba(255, 240, 232, 0.95), rgba(255, 255, 255, 0.96)),
        var(--surface);
}

.reports-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.reports-kicker,
.report-section-kicker,
.report-card-kicker,
.planner-sidebar-label,
.dashboard-tech-label {
    color: var(--brand-primary);
}

.reports-status-filter.active,
.report-chip.is-selected,
.planner-day.selected {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

.report-card {
    background: #ffffff;
}

.report-card-actions-btn,
.btn-action-icon,
.btn-edit,
.planner-task-delete {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    color: var(--ink);
    border-radius: 8px;
}

.report-card-actions-btn:hover,
.btn-action-icon:hover,
.btn-edit:hover {
    background: var(--accent-soft);
    border-color: rgba(255, 91, 31, 0.28);
    color: var(--brand-primary);
}

.report-card-status.status-abierto,
.badge-warning {
    background: #faf1da;
    color: #7a5810;
    border-color: #e5bb5c;
}

.report-card-status.status-en-progreso {
    background: #e9f3ff;
    color: #1e5b95;
    border-color: #b8d8f6;
}

.report-card-status.status-cerrado,
.badge-success {
    background: #e7f7ee;
    color: #146c3d;
    border-color: #b6e2c7;
}

.report-card-status.status-cancelado {
    background: #f8f5f2;
    color: #6b5a4c;
    border-color: #e2d9d1;
}

#reportar-view > .card,
#time-control-view > .card,
#tasks-view > .card {
    background: #ffffff;
}

.profiles-section-header,
.profiles-table thead tr,
.report-builder-section-head,
.modal-header,
.modal-footer,
.planner-sidebar-header,
.planner-calendar-header {
    background: var(--surface-soft);
    border-color: var(--border-color);
    color: var(--ink);
}

.profiles-table,
.reportar-table,
.services-table,
.materiales-table {
    color: var(--ink);
}

.profiles-table tbody tr,
.reportar-table tbody tr {
    background: #ffffff;
    border-color: var(--border-color);
}

.profiles-table tbody tr:hover,
.reportar-table tbody tr:hover {
    background: var(--surface-soft);
}

.profiles-table thead th,
.profiles-table td,
.reportar-table td {
    color: var(--ink);
    border-color: var(--border-color);
}

.modal-overlay {
    background: rgba(25, 22, 19, 0.48);
}

.report-modal-content,
#cotizador-modal .modal-content.cotizador-modal-content {
    background: var(--surface);
}

.report-builder-section,
.report-received-card,
.report-signatures,
.report-material-row,
.report-modal-content .equipment-card,
#cotizador-modal .cotizador-ui .section,
#cotizador-modal .cotizador-ui .resumen-box {
    background: var(--surface-soft);
    border-color: var(--border-color);
    color: var(--ink);
    border-radius: 8px;
}

.report-order-chip,
.report-section-badge,
#cotizador-modal .cotizador-ui .section-num,
#cotizador-modal .cotizador-ui .header-badge {
    background: var(--accent-soft);
    color: var(--brand-primary);
    border-color: rgba(255, 91, 31, 0.24);
}

.report-progress-step.is-done,
.report-progress-step.is-active {
    background: var(--brand-primary);
}

.report-signature-canvas-wrap,
.equipment-gallery-add,
#cotizador-modal .cotizador-ui input,
#cotizador-modal .cotizador-ui select,
#cotizador-modal .cotizador-ui textarea {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--ink);
}

#cotizador-modal .cotizador-ui .page-header {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--ink);
}

#cotizador-modal .cotizador-ui .logo-icon {
    background: var(--brand-primary);
    color: #ffffff;
}

#cotizador-modal .cotizador-ui .logo-text h1,
#cotizador-modal .cotizador-ui .section-head h2,
#cotizador-modal .cotizador-ui .field label {
    color: var(--ink);
}

#cotizador-modal .cotizador-ui .logo-text p,
#cotizador-modal .cotizador-ui .section-head p,
#cotizador-modal .cotizador-ui .cell-ref {
    color: var(--text-muted);
}

#cotizador-modal .cotizador-ui .services-table thead tr,
#cotizador-modal .cotizador-ui .materiales-table thead tr {
    background: var(--surface-muted);
    color: var(--ink);
}

#cotizador-modal .cotizador-ui .services-table tbody tr,
#cotizador-modal .cotizador-ui .materiales-table tbody tr {
    background: #ffffff;
}

#bottom-nav {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -12px 28px rgba(32, 27, 21, 0.08);
}

.nav-button {
    color: var(--ink-soft);
}

.nav-button.active,
.nav-button:hover {
    color: var(--brand-primary);
}

.nav-button-inner {
    background: var(--surface-muted);
    color: inherit;
}

.nav-button.active .nav-button-inner,
.nav-button:hover .nav-button-inner {
    background: var(--brand-primary);
    color: #ffffff;
}

.global-loading-overlay {
    background: rgba(244, 243, 239, 0.72);
}
.global-loading-overlay .global-loading-spinner {
    border-color: rgba(30, 41, 59, 0.18);
    border-top-color: #4a1420;
}

.global-loading-box,
.toast {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--ink, #45141e);
    box-shadow: var(--shadow-soft);
}
#global-loading-text {
    color: var(--ink, #45141e) !important;
    font-weight: 500;
}

@media (max-width: 768px) {
    #main-content {
        background: var(--bg-dark);
    }

    #main-content > .section-header {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .card,
    .reports-hero,
    .report-card,
    .profiles-section,
    .planner-calendar-panel,
    .reports-actions,
    .reports-actions .btn {
        width: 100%;
    }
}

/* Override final del Planificador sobre el tema claro */
#planner-view .planner-layout {
    grid-template-columns: minmax(620px, 1.75fr) minmax(360px, 0.8fr);
    gap: 1.4rem;
}

#planner-view .planner-calendar-panel,
#planner-view .planner-sidebar {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

#planner-view .planner-month-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

#planner-view .planner-summary-card,
#planner-view .planner-task-details div {
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

#planner-view .planner-summary-card {
    padding: 0.85rem;
    min-height: 82px;
}

#planner-view .planner-summary-card span,
#planner-view .planner-summary-card small,
#planner-view .planner-task-details dt {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
}

#planner-view .planner-summary-card strong {
    display: block;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 0.2rem 0;
}

#planner-view .planner-day {
    min-height: 112px;
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem;
    box-shadow: none;
}

#planner-view .planner-day:hover {
    background: var(--surface-soft);
    border-color: rgba(255, 91, 31, 0.35);
    transform: translateY(-1px);
}

#planner-view .planner-day.other-month {
    background: #f8f5f2;
    opacity: 1;
}

#planner-view .planner-day.selected {
    background: #faf1f3;
    border-color: var(--brand-primary);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(255, 91, 31, 0.2);
}

#planner-view .planner-day.today {
    border-color: rgba(255, 91, 31, 0.42);
}

#planner-view .planner-day.has-tasks {
    border-left: 1px solid #8a7767;
}

#planner-view .planner-day.has-tasks.priority-high {
    border-left-color: #dc2626;
}

#planner-view .planner-day.has-tasks.priority-medium {
    border-left-color: var(--brand-primary);
}

#planner-view .planner-day.has-tasks.priority-low {
    border-left-color: #16a34a;
}

#planner-view .planner-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

#planner-view .planner-day-number {
    color: var(--ink);
    font-weight: 800;
}

#planner-view .planner-day-count {
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

#planner-view .planner-day-task {
    background: #f1f5f9;
    color: var(--ink);
    border: 1px solid #efe9e3;
    border-radius: 6px;
    font-weight: 650;
}

#planner-view .planner-day-task.priority-high {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

#planner-view .planner-day-task.priority-medium {
    background: #fdf8ec;
    color: #73202f;
    border-color: #f5e6c0;
}

#planner-view .planner-day-task.priority-low,
#planner-view .planner-day-task.more {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

#planner-view .planner-tasks-empty {
    background: #f8fafc;
    border: 1px dashed #e2d9d1;
    border-radius: 8px;
    color: var(--text-muted);
    padding: 1.5rem;
    text-align: left;
}

#planner-view .planner-tasks-empty strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

#planner-view .planner-tasks-empty p {
    margin: 0;
    line-height: 1.5;
}

#planner-view .planner-task-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 1px solid var(--brand-primary);
    border-radius: 8px;
    box-shadow: none;
    padding: 0.95rem;
}

#planner-view .planner-task-card.priority-high {
    border-left-color: #dc2626;
}

#planner-view .planner-task-card.priority-low {
    border-left-color: #16a34a;
}

#planner-view .planner-task-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.35rem 0 0;
}

#planner-view .planner-task-details div {
    padding: 0.5rem;
    min-width: 0;
}

#planner-view .planner-task-details dd {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#planner-view .planner-task-priority,
#planner-view .planner-task-status {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.18rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.1;
}

#planner-view .planner-task-priority.dashboard-priority-high {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

#planner-view .planner-task-priority.dashboard-priority-alta {
    background: #fdf8ec;
    color: #73202f;
    border-color: #eed08f;
}

#planner-view .planner-task-priority.dashboard-priority-medium {
    background: #fdf8ec;
    color: #8a6512;
    border-color: #eed08f;
}

#planner-view .planner-task-status.dashboard-status-progress {
    background: #fdf8ec;
    color: #73202f;
    border-color: #f5e6c0;
}

#planner-view .planner-task-priority.dashboard-priority-low,
#planner-view .planner-task-status.dashboard-status-closed {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

#planner-view .planner-task-status.dashboard-status-pending,
#planner-view .planner-task-status.dashboard-status-viewed {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

#planner-view .planner-task-status.dashboard-status-cancelled {
    background: #f1f5f9;
    color: #6b5a4c;
    border-color: #e2d9d1;
}

@media (max-width: 1180px) {
    #planner-view .planner-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #planner-view .planner-month-summary,
    #planner-view .planner-task-details {
        grid-template-columns: 1fr;
    }

    #planner-view .planner-day {
        min-height: 82px;
        padding: 0.42rem;
    }
}

/* Estilo web escritorio basado en la referencia aprobada */
@media (min-width: 1024px) {
    :root {
        --bg-dark: #f8f5f2;
        --bg-dark-accent: #ffffff;
        --brand-primary: #4a1420;
        --brand-primary-hover: #9c4453;
        --text-light: #35131a;
        --text-muted: #a89686;
        --border-color: #efe9e3;
        --surface: #ffffff;
        --surface-soft: #f8f5f2;
        --surface-muted: #efe9e3;
        --ink: #35131a;
        --ink-soft: #6b5a4c;
        --accent-soft: #faf1f3;
        --shadow-soft: none;
        --sidebar-width: 220px;
    }

    html,
    body {
        height: 100%;
        background: #f8f5f2;
        color: #35131a;
        font-family: var(--mgm-sans);
        font-size: 14px;
        line-height: 1.5;
    }

    #main-app {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        background: #f8f5f2;
    }

    #sidebar {
        position: relative;
        inset: auto;
        transform: none;
        width: var(--sidebar-width);
        height: 100vh;
        padding: 0;
        gap: 0;
        background: #ffffff;
        border-right: 1px solid #f0ece6;
        box-shadow: 2px 0 12px rgba(32, 27, 21, 0.05);
        color: #1a1612;
        overflow: hidden;
        z-index: 10;
    }

    .sidebar-brand {
        min-height: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 18px 16px 14px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #f0ece6;
        border-radius: 0;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1.5px solid #5c1a28;
        background: #faf1f3;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }

    .brand-mark img {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        padding: 0;
        background: transparent;
        object-fit: contain;
        box-shadow: none;
    }

    .sidebar-brand strong,
    .brand-name {
        color: #1a1612;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
    }

    .brand-sub {
        color: var(--mgm-texto-apagado);
        font-size: 11px;
        line-height: 1.2;
    }

    .sidebar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #fafaf9;
        border-bottom: 1px solid #f0ece6;
    }

    .user-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #e3c5cb;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .user-avatar-initial {
        font-size: 15px;
        font-weight: 700;
        color: #5c1a28;
        line-height: 1;
        text-transform: uppercase;
    }

    .sidebar-user-info {
        flex: 1;
        min-width: 0;
    }

    .user-name {
        color: #1a1612;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: none;
    }

    .sidebar-brand .badge,
    .user-role,
    #sidebar-user {
        color: var(--mgm-texto-apagado);
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: transparent;
        padding: 0;
        border: 0;
        display: block;
        width: auto;
        max-width: none;
        margin-top: 0;
    }

    .sidebar-user-chevron {
        width: 14px;
        height: 14px;
        color: #ccc;
        flex-shrink: 0;
    }

    #sidebar nav,
    .sidebar-nav {
        flex: 1;
        padding: 12px 10px;
        gap: 2px;
        overflow-y: auto;
    }

    .nav-link {
        min-height: 34px;
        padding: 8px 12px;
        gap: 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #555;
        background: transparent;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
    }

    .nav-link:hover {
        background: #f7f5f3;
        border-color: #e8e4de;
        color: #1a1612;
    }

    .nav-link.active {
        background: #faf1f3;
        color: #5c1a28;
        border: 1px solid rgba(232, 93, 38, 0.18);
        box-shadow: none;
        font-weight: 500;
    }

    .nav-link .nav-icon {
        width: 17px;
        height: 17px;
        border-radius: 0;
        background: transparent;
        color: currentColor;
        flex: 0 0 17px;
    }

    .nav-link.active .nav-icon {
        background: transparent;
        color: #5c1a28;
    }

    .nav-link .nav-icon svg {
        width: 17px;
        height: 17px;
        display: block;
    }

    .sidebar-footer {
        padding: 12px 10px;
        border-top: 1px solid #f0ece6;
        background: transparent;
    }

    .logout-btn,
    #logout-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
        padding: 9px 12px;
        background: transparent;
        border: 1px solid #e8e4de;
        border-radius: 8px;
        color: #888;
        box-shadow: none;
        font-size: 13px;
        cursor: pointer;
    }

    .logout-btn:hover,
    #logout-btn:hover {
        background: #faf1f3;
        color: #5c1a28;
        border-color: rgba(232, 93, 38, 0.25);
        transform: none;
    }

    #main-content {
        height: 100vh;
        padding: 0;
        overflow-y: auto;
        background: #f8f5f2;
        color: #35131a;
    }

    #main-content > .section-header {
        position: sticky;
        top: 0;
        z-index: 50;
        min-height: 56px;
        margin: 0;
        padding: 0 28px;
        background: #ffffff;
        border: 0;
        border-bottom: 1px solid #efe9e3;
        border-radius: 0;
        box-shadow: none;
        color: #35131a;
    }

    .section-title-block {
        gap: 1px;
    }

    .section-header h2,
    .section-title-block h2 {
        color: #35131a;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
    }

    .section-subtitle,
    #header-user-role {
        color: var(--mgm-texto-apagado);
        font-size: 12px;
        margin-top: 1px;
    }

    .header-actions {
        gap: 8px;
    }

    #back-btn,
    #menu-btn {
        display: none;
    }

    .page-view {
        padding: 24px 28px;
    }

    .btn,
    .btn-primary,
    .generate-btn {
        min-height: 34px;
        padding: 7px 14px;
        border-radius: 10px;
        background: #4a1420;
        border: 1px solid #4a1420;
        color: #ffffff;
        box-shadow: none;
        font-family: var(--mgm-sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .btn:hover,
    .btn-primary:hover,
    .generate-btn:hover {
        background: #9c4453;
        border-color: #9c4453;
        color: #ffffff;
        transform: none;
        box-shadow: none;
    }

    .btn-outline,
    .btn-ghost,
    .btn-icon,
    .modal-close-btn,
    .reports-status-filter,
    .planner-nav-btn,
    .report-card-actions-btn,
    .btn-action-icon,
    .btn-edit {
        background: #ffffff;
        color: #6b5a4c;
        border: 1px solid #efe9e3;
        border-radius: 10px;
        box-shadow: none;
    }

    .btn-icon,
    .notification-btn {
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        justify-content: center;
    }

    .btn-outline:hover,
    .btn-ghost:hover,
    .btn-icon:hover,
    .modal-close-btn:hover,
    .reports-status-filter:hover,
    .planner-nav-btn:hover,
    .report-card-actions-btn:hover,
    .btn-action-icon:hover,
    .btn-edit:hover {
        background: #f8f5f2;
        border-color: #efe9e3;
        color: #35131a;
        transform: none;
    }

    .notification-count,
    .notif-dot {
        background: #4a1420;
    }

    .card,
    .dashboard-card,
    .reports-hero,
    .report-card,
    .profiles-section,
    .table-wrapper,
    .planner-calendar-panel,
    .planner-sidebar,
    .time-map-card,
    .modal-content,
    .report-modal-content,
    #cotizador-modal .modal-content.cotizador-modal-content {
        background: #ffffff;
        border: 1px solid #efe9e3;
        border-radius: 14px;
        box-shadow: none;
        color: #35131a;
    }

    .card,
    .profiles-section,
    .planner-calendar-panel,
    .section-header-compact,
    .profiles-section-header,
    .dashboard-card-header,
    .report-builder-section-head,
    .planner-calendar-header,
    .planner-sidebar-header,
    .modal-header,
    .modal-footer {
        background: #ffffff;
        border-color: #efe9e3;
        color: #35131a;
    }

    .profiles-section-title,
    .card h3,
    .card h4,
    .dashboard-card h4,
    .section-header h3,
    .reports-hero-copy h3,
    .report-card-info h4,
    .planner-task-title,
    .planner-current-month,
    .modal-header h3,
    .report-builder-section-title {
        color: #35131a;
        letter-spacing: 0;
    }

    .muted-text,
    .section-subtitle,
    .report-card-info p,
    .report-card-meta-item span,
    .planner-task-meta,
    .planner-calendar-subtitle,
    .report-builder-section-subtitle {
        color: #a89686;
    }

    input,
    select,
    textarea,
    .form-control,
    .report-builder-field input,
    .report-builder-field select,
    .report-builder-field textarea,
    .form-group input,
    .form-group select,
    .form-group textarea,
    #cotizador-modal .cotizador-ui input,
    #cotizador-modal .cotizador-ui select,
    #cotizador-modal .cotizador-ui textarea {
        background: #f8f5f2;
        border: 1px solid #efe9e3;
        border-radius: 10px;
        color: #35131a;
        font-family: var(--mgm-sans);
        font-size: 13px;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .report-builder-field input:focus,
    .report-builder-field select:focus,
    .report-builder-field textarea:focus {
        background: #faf1f3;
        border-color: #e3c5cb;
        box-shadow: none;
        outline: none;
    }

    .reports-hero {
        padding: 18px;
        background: #ffffff;
    }

    .reports-kicker,
    .report-section-kicker,
    .report-card-kicker,
    .planner-sidebar-label,
    .dashboard-tech-label,
    .report-section-badge,
    .report-order-chip,
    #cotizador-modal .cotizador-ui .header-badge {
        color: #4a1420;
    }

    .reports-status-filter,
    .report-chip {
        min-height: 30px;
        padding: 6px 14px;
        border-radius: 10px;
        background: #f8f5f2;
        color: #a89686;
        border: 1px solid #efe9e3;
        font-size: 12px;
        font-weight: 600;
    }

    .reports-status-filter.active,
    .report-chip.is-selected {
        background: #ffffff;
        color: #4a1420;
        border-color: #e3c5cb;
    }

    .profiles-table,
    .reportar-table,
    .dashboard-table,
    .services-table,
    .materiales-table {
        width: 100%;
        border-collapse: collapse;
        color: #6b5a4c;
    }

    .profiles-table thead tr,
    .reportar-table thead tr,
    .dashboard-table thead tr,
    .services-table thead tr,
    .materiales-table thead tr,
    #cotizador-modal .cotizador-ui .services-table thead tr,
    #cotizador-modal .cotizador-ui .materiales-table thead tr {
        background: #f8f5f2;
        color: #a89686;
    }

    .profiles-table th,
    .reportar-table th,
    .dashboard-table th,
    .services-table th,
    .materiales-table th {
        padding: 10px 18px;
        color: #a89686;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 1px solid #efe9e3;
    }

    .profiles-table td,
    .reportar-table td,
    .dashboard-table td,
    .services-table td,
    .materiales-table td {
        padding: 12px 18px;
        color: #6b5a4c;
        font-size: 13px;
        border-bottom: 1px solid #efe9e3;
    }

    .profiles-table tbody tr,
    .reportar-table tbody tr,
    .dashboard-table tbody tr {
        background: #ffffff;
    }

    .profiles-table tbody tr:hover,
    .reportar-table tbody tr:hover,
    .dashboard-table tbody tr:hover {
        background: #fdfbf9;
    }

    .report-card-status,
    .badge,
    .planner-task-priority,
    .planner-task-status {
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .report-card-status.status-abierto,
    .badge-warning {
        background: #fdf8ec;
        color: #73202f;
        border-color: #eed08f;
    }

    .report-card-status.status-en-progreso,
    .pill-blue {
        background: #eff4fe;
        color: #2563eb;
        border-color: #c7d7fe;
    }

    .report-card-status.status-cerrado,
    .badge-success {
        background: #eaf7f1;
        color: #1a8c5b;
        border-color: #bdebd8;
    }

    #planner-view .planner-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 16px;
    }

    #planner-view .planner-month-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    #planner-view .planner-summary-card {
        min-height: 0;
        padding: 16px 18px;
        background: #ffffff;
        border: 1px solid #efe9e3;
        border-radius: 14px;
    }

    #planner-view .planner-summary-card:nth-child(3) {
        background: #faf1f3;
        border-color: #e3c5cb;
    }

    #planner-view .planner-summary-card strong {
        color: #35131a;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: 0;
    }

    #planner-view .planner-summary-card:nth-child(3) strong {
        color: #4a1420;
    }

    #planner-view .planner-calendar-panel,
    #planner-view .planner-sidebar {
        padding: 18px;
        border-radius: 14px;
    }

    #planner-view .planner-calendar-header {
        padding-bottom: 14px;
        border-bottom: 1px solid #efe9e3;
    }

    #planner-view .planner-weekdays,
    #planner-view .planner-grid {
        gap: 0;
    }

    #planner-view .planner-weekday {
        padding: 4px 0 8px;
        color: #e2d9d1;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    #planner-view .planner-day {
        min-height: 60px;
        margin: 0;
        padding: 6px 5px;
        border: 0;
        border-radius: 6px;
        background: #ffffff;
        color: #6b5a4c;
        text-align: center;
    }

    #planner-view .planner-day:hover {
        background: #f8f5f2;
        transform: none;
    }

    #planner-view .planner-day.selected,
    #planner-view .planner-day.today {
        background: #4a1420;
        color: #ffffff;
        box-shadow: none;
    }

    #planner-view .planner-day.selected .planner-day-number,
    #planner-view .planner-day.today .planner-day-number {
        color: #ffffff;
    }

    #planner-view .planner-day.other-month {
        background: #ffffff;
        color: #e2d9d1;
    }

    #planner-view .planner-day.has-tasks {
        border-left: 0;
    }

    #planner-view .planner-day-count {
        min-width: 16px;
        height: 16px;
        background: #faf1f3;
        color: #4a1420;
        font-size: 10px;
    }

    #planner-view .planner-day.selected .planner-day-count,
    #planner-view .planner-day.today .planner-day-count {
        background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }

    #planner-view .planner-day-task {
        background: transparent;
        border: 0;
        color: #4a1420;
        font-size: 10px;
        padding: 0;
    }

    #planner-view .planner-day.selected .planner-day-task,
    #planner-view .planner-day.today .planner-day-task {
        color: rgba(255, 255, 255, 0.82);
    }

    #planner-view .planner-task-card {
        border-radius: 14px;
        border-color: #efe9e3;
        border-left: 1px solid #4a1420;
    }

    .modal-overlay {
        background: rgba(26, 31, 46, 0.5);
    }

    .modal-content,
    .report-modal-content,
    #cotizador-modal .modal-content.cotizador-modal-content {
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(26, 31, 46, 0.18);
    }

    .report-builder-section,
    .report-received-card,
    .report-signatures,
    .report-material-row,
    .report-modal-content .equipment-card,
    #cotizador-modal .cotizador-ui .section,
    #cotizador-modal .cotizador-ui .resumen-box {
        background: #ffffff;
        border: 1px solid #efe9e3;
        border-radius: 14px;
        color: #35131a;
    }

    #cotizador-modal .cotizador-ui .page-header {
        background: #35131a;
        border-color: #35131a;
        border-radius: 14px;
        color: #ffffff;
    }

    #cotizador-modal .cotizador-ui .logo-text h1 {
        color: #ffffff;
    }

    #cotizador-modal .cotizador-ui .logo-text p {
        color: rgba(255, 255, 255, 0.55);
    }

    .global-loading-box,
    .toast {
        background: #ffffff;
        border-color: #efe9e3;
        color: #35131a;
        box-shadow: 0 20px 60px rgba(26, 31, 46, 0.12);
    }

    .dashboard-wrapper,
    .dashboard-analytics-grid,
    .dashboard-bottom-grid,
    .reports-shell,
    .planner-layout {
        gap: 16px;
    }

    .dashboard-metric-value,
    .dashboard-kpi-item strong,
    .planner-summary-card strong,
    .report-card-code,
    .report-order-chip,
    #cotizador-modal .cotizador-ui .summary-value,
    #cotizador-modal .cotizador-ui .resumen-total {
        font-family: var(--mgm-mono);
    }
}

/* Ajustes finales de simetria y planificador escritorio */
@media (min-width: 1024px) {
    html:has(body:not(.app-not-authenticated)),
    body:not(.app-not-authenticated) {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #f8f5f2;
    }

    body.web-desktop-compact {
        zoom: 1;
    }

    body:not(.app-not-authenticated) #main-app,
    #main-app {
        width: 100vw;
        min-width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        overflow: hidden;
    }

    body:not(.app-not-authenticated) #sidebar,
    #sidebar {
        height: 100dvh;
        min-height: 100dvh;
        align-self: stretch;
    }

    body:not(.app-not-authenticated) #main-content,
    #main-content {
        width: 100%;
        min-width: 0;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body:not(.app-not-authenticated) .page-view,
    .page-view {
        width: 100%;
        max-width: none;
    }

    body:not(.app-not-authenticated) #planner-view,
    #planner-view {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: calc(100dvh - 56px);
        padding: 22px 28px 28px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-month-summary,
    #planner-view .planner-month-summary {
        margin-bottom: 4px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-layout,
    #planner-view .planner-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
        flex: 0 0 auto;
    }

    body:not(.app-not-authenticated) #planner-view .planner-calendar-panel,
    #planner-view .planner-calendar-panel {
        min-width: 0;
    }

    body:not(.app-not-authenticated) #planner-view .planner-calendar-header,
    #planner-view .planner-calendar-header {
        min-height: 50px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-grid,
    #planner-view .planner-grid {
        min-height: 292px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-day,
    #planner-view .planner-day {
        min-height: 48px;
        padding: 5px 4px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-sidebar,
    #planner-view .planner-sidebar {
        max-height: 438px;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form,
    #planner-view .planner-task-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form.hidden,
    #planner-view .planner-task-form.hidden {
        display: none !important;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group,
    #planner-view .planner-task-form .form-group {
        margin: 0;
        min-width: 0;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(1),
    #planner-view .planner-task-form .form-group:nth-child(1) {
        order: 1;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(2),
    #planner-view .planner-task-form .form-group:nth-child(2) {
        order: 2;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(3),
    #planner-view .planner-task-form .form-group:nth-child(3) {
        order: 3;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(4),
    #planner-view .planner-task-form .form-group:nth-child(4) {
        order: 4;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(5),
    #planner-view .planner-task-form .form-group:nth-child(5) {
        order: 5;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(7),
    #planner-view .planner-task-form .form-group:nth-child(7) {
        order: 6;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form .form-group:nth-child(6),
    #planner-view .planner-task-form .form-group:nth-child(6) {
        order: 7;
        grid-column: 1 / -1;
    }

    body:not(.app-not-authenticated) #planner-view .planner-form-actions,
    #planner-view .planner-form-actions {
        order: 8;
        grid-column: 1 / -1;
        margin: 0;
    }

    body:not(.app-not-authenticated) #planner-view #planner-task-description,
    #planner-view #planner-task-description {
        min-height: 42px;
        height: 42px;
        resize: vertical;
    }

    body:not(.app-not-authenticated) #planner-view .planner-assignee-checklist,
    #planner-view .planner-assignee-checklist {
        max-height: 106px;
        overflow-y: auto;
    }

    body:not(.app-not-authenticated) #planner-view .planner-tracking-panel,
    #planner-view .planner-tracking-panel {
        flex: 1 1 auto;
        min-height: 150px;
        margin-top: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1420px) {
    body:not(.app-not-authenticated) #planner-view .planner-layout,
    #planner-view .planner-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    body:not(.app-not-authenticated) #planner-view .planner-task-form,
    #planner-view .planner-task-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    body:not(.app-not-authenticated) #planner-view .planner-task-form.hidden,
    #planner-view .planner-task-form.hidden {
        display: none !important;
    }
}

/* Contraste de titulos en formularios Reportar / Cotizador */
#cotizador-modal .cotizador-ui .section-head {
    background: #35131a;
    border-color: #35131a;
    color: #ffffff;
}

#cotizador-modal .cotizador-ui .section-head h2,
#cotizador-modal.reportar-tech-mode .cotizador-ui .section-head h2,
#cotizador-modal.reportar-gerencia-mode .cotizador-ui .section-head h2 {
    color: #ffffff;
    text-shadow: none;
}

#cotizador-modal .cotizador-ui .section-head p,
#cotizador-modal.reportar-tech-mode .cotizador-ui .section-head p,
#cotizador-modal.reportar-gerencia-mode .cotizador-ui .section-head p {
    color: rgba(255, 255, 255, 0.66);
}

#cotizador-modal .cotizador-ui .section-head .section-num {
    background: #faf1f3;
    color: #4a1420;
}

#cotizador-modal .cotizador-ui .field label,
#cotizador-modal .cotizador-ui .services-table th,
#cotizador-modal .cotizador-ui .materiales-table th,
#reportar-view .profile-form label,
#report-modal .report-builder-field span,
#report-modal .form-group label {
    color: #35131a;
}

/* ── Filtros del cotizador ─────────────────── */
.cotizador-filters {
    background: #ffffff;
    border: 1px solid #efe9e3;
    border-radius: 14px;
    padding: 0.9rem 1rem 0;
    margin-bottom: 1rem;
}

.cotizador-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    margin-bottom: 0.85rem;
}

.cotizador-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 140px;
}

.cotizador-filter-group label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a7767;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cotizador-filter-group select {
    padding: 0.45rem 0.7rem;
    border: 1px solid #efe9e3;
    border-radius: 8px;
    background: #fdfbf9;
    color: #2c0c12;
    font-size: 0.85rem;
}

.reports-dynamic-filters {
    padding-bottom: 0.05rem;
}

/* Estado tabs — botones tipo pill */
.cotizador-estado-tabs {
    display: flex;
    gap: 0.45rem;
    padding: 0.75rem 0;
    border-top: 1px solid #efe9e3;
    overflow-x: auto;
    flex-wrap: wrap;
}

.cot-tab {
    padding: 0.42rem 1rem;
    background: #f1f5f9;
    border: 1px solid #efe9e3;
    border-radius: 999px;
    color: #6b5a4c;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cot-tab:hover {
    background: #f2e2e5;
    border-color: #e3c5cb;
    color: #73202f;
}

.cot-tab.active {
    background: var(--brand-primary, #4a1420);
    border-color: var(--brand-primary, #4a1420);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(232, 80, 10, 0.25);
}

/* ── Lista cotizaciones ─────────────────────── */
.cotizaciones-list {
    display: grid;
    gap: 0.75rem;
}

.cotizacion-card,
.cotizacion-empty {
    background: #ffffff;
    border: 1px solid #efe9e3;
    border-radius: 14px;
    padding: 1rem;
    color: #2c0c12;
}

.cotizacion-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
}

.cotizacion-info { min-width: 0; }

.cotizacion-numero-ref {
    font-size: 0.7rem;
    font-weight: 600;
    color: #5c1a28;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.15rem;
}

.cotizacion-meta-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.cotizacion-card h4,
.cotizacion-empty h4 {
    margin: 0.2rem 0;
    color: #2c0c12;
    font-size: 0.95rem;
}

.cotizacion-card p,
.cotizacion-card small,
.cotizacion-empty p {
    color: #8a7767;
    margin: 0;
}

.cotizacion-total {
    font-size: 1.05rem;
    color: #2c0c12;
    white-space: nowrap;
}

/* Estado badges */
.cotizacion-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cot-status-generada  { background: #faf1f3; color: #4a1420; }
.cot-status-borrador  { background: #f1f5f9; color: #6b5a4c; }
.cot-status-enviada   { background: #dbeafe; color: #1d4ed8; }
.cot-status-aprobada  { background: #d1fae5; color: #065f46; }
.cot-status-no-aprobada { background: #fee2e2; color: #b91c1c; }

.cot-badge-ejecutada {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #e8f5e9;
    color: #2e7d32;
}
.cot-badge-novedad {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #f3e8ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

/* Botones acción — iconos */
.cotizacion-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    align-items: center;
}

.cot-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #efe9e3;
    background: #fdfbf9;
    color: #6b5a4c;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}

.cot-action-icon svg { width: 15px; height: 15px; }
.cot-action-icon:hover { background: #f1f5f9; color: #2c0c12; border-color: #e2d9d1; }

.cot-action-approve { color: #059669; border-color: #a7f3d0; background: #f0fdf4; }
.cot-action-approve:hover { background: #d1fae5; }

.cot-action-reject { color: #dc2626; border-color: #fecaca; background: #fff5f5; }
.cot-action-reject:hover { background: #fee2e2; }

.cot-action-schedule { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.cot-action-schedule:hover { background: #dbeafe; }
.cot-action-send { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.cot-action-send:hover { background: #e0f2fe; }
.cot-action-reactivar { color: #a87d1c; border-color: #eed08f; background: #fdf8ec; }
.cot-action-reactivar:hover { background: #faf1da; }
.cot-badge-alerta {
    display: inline-flex; align-items: center; gap: 3px;
    border-radius: 999px; padding: 0.18rem 0.5rem;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    background: #faf1da; color: #73202f; border: 1px solid #eed08f;
    animation: cot-alerta-pulse 2s ease-in-out infinite;
}
@keyframes cot-alerta-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.cot-action-delete { color: #b91c1c; border-color: #fecaca; }
.cot-action-delete:hover { background: #fee2e2; border-color: #fca5a5; }

/* ── Semáforo de cotizaciones ─────────────────────────────────────── */
.cot-semaforo {
    display: inline-flex; align-items: center; gap: 3px;
    border-radius: 999px; padding: 0.18rem 0.5rem;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
}
.cot-semaforo-ambar {
    background: #fdf8ec; color: #73202f; border: 1px solid #eed08f;
    animation: cot-alerta-pulse 2.5s ease-in-out infinite;
}
.cot-semaforo-rojo {
    background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;
    animation: cot-alerta-pulse 1.5s ease-in-out infinite;
}

#cotizador-modal .cotizador-ui .services-table tbody tr,
#cotizador-modal .cotizador-ui .materiales-table tbody tr {
    background: #ffffff;
    border-bottom-color: #efe9e3;
}

#cotizador-modal .cotizador-ui .services-table td,
#cotizador-modal .cotizador-ui .materiales-table td,
#cotizador-modal .cotizador-ui .td-actividad,
#cotizador-modal .cotizador-ui .td-equipo,
#cotizador-modal .cotizador-ui .td-valor {
    color: #381018;
}

#cotizador-modal .cotizador-ui .td-code {
    color: #4a1420;
    font-weight: 700;
}

#cotizador-modal .cotizador-ui .empty-row td {
    color: #8a7767;
    background: #ffffff;
}

#cotizador-modal .cotizador-ui input,
#cotizador-modal .cotizador-ui select,
#cotizador-modal .cotizador-ui textarea,
#report-modal input,
#report-modal select,
#report-modal textarea {
    color: #381018;
    background: #f8fafc;
}

.report-signature-tab {
    background: #f8fafc;
    color: #4a3c31;
    border-color: #e2d9d1;
}

.report-signature-tab.is-active {
    background: #faf1f3;
    color: #4a1420;
    border-color: #e3c5cb;
}

@media (max-width: 780px) {
    .cotizacion-card {
        grid-template-columns: 1fr;
    }

    .cotizacion-actions {
        justify-content: flex-start;
    }
}

/* =========================================================
   LIGHT THEME FIXES – task cards, buttons, cotizador
   ========================================================= */

/* Task card: light background instead of dark */
.task-card {
    background: #ffffff;
    border-color: var(--border-color);
}

.task-card:hover {
    border-color: rgba(255, 91, 31, 0.35);
}

.task-card-title-block h4 {
    color: var(--ink);
}

.task-card-description {
    color: var(--ink-soft);
}

.task-card-footer {
    color: var(--ink-soft);
}

.task-card-assignee {
    color: var(--ink-soft);
}

/* Task status badges: use dark text for readability */
.task-status-tag {
    background: rgba(0, 0, 0, 0.07);
    color: var(--ink);
}

.task-status-completed {
    background: rgba(22, 138, 74, 0.13);
    color: #146c3d;
}

.task-origin-tag {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.task-priority-badge {
    color: var(--ink);
}

/* Task action buttons: dark text on light card */
.task-complete-btn {
    background: rgba(22, 138, 74, 0.1);
    border-color: rgba(22, 138, 74, 0.4);
    color: #146c3d;
}

.task-complete-btn:hover,
.task-complete-btn:focus-visible {
    background: rgba(22, 138, 74, 0.2);
    border-color: rgba(22, 138, 74, 0.6);
}

.task-ack-btn {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
    color: #1e40af;
}

.task-ack-btn:hover,
.task-ack-btn:focus-visible {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.6);
}

.task-completed-label {
    color: #146c3d;
}

.task-ack-label {
    color: #1e40af;
}

.task-report-link {
    color: #146c3d;
    border-color: rgba(22, 138, 74, 0.35);
    background: rgba(22, 138, 74, 0.08);
}

.task-report-link.missing {
    color: #c83c2e;
    border-color: rgba(200, 60, 46, 0.35);
    background: rgba(200, 60, 46, 0.08);
}

/* Cotizador summary: rval dark text on light background */
#cotizador-modal .cotizador-ui .rval {
    color: var(--ink);
}

#cotizador-modal .cotizador-ui .rval.total {
    color: var(--brand-primary);
}

#cotizador-modal .cotizador-ui .rlbl {
    color: var(--ink-soft);
}

#cotizador-modal .cotizador-ui .resumen-divider {
    background: var(--border-color);
}

/* btn-edit: same sizing as btn-action-icon, pencil icon only */
.btn-edit {
    width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    font-size: 0;
    overflow: hidden;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(148, 163, 184, 0.07);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-edit::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.btn-edit:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
    color: var(--brand-primary);
    box-shadow: none;
    transform: translateY(-1px);
}

/* Gestion panel — light theme fixes */
.profile-form {
    background: var(--surface-soft);
    border-color: var(--border-color);
}

.gestion-tab-content {
    padding: 1.25rem 0;
}

.gestion-tab-content .form-group label {
    color: var(--ink-soft);
    font-weight: 500;
}

.gestion-tab-content .form-group input,
.gestion-tab-content .form-group select,
.gestion-tab-content .form-group textarea {
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--border-color);
}

.gestion-tab-content .form-group input:focus,
.gestion-tab-content .form-group select:focus,
.gestion-tab-content .form-group textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 91, 31, 0.12);
    outline: none;
}

/* Clientes table in gestion */
#clientes-list table,
#zonas-list table,
#sedes-list table,
#perfiles-list table,
#dispositivos-list table,
#catalogo-list table,
#gastos-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--ink);
}

#clientes-list th,
#zonas-list th,
#sedes-list th,
#perfiles-list th,
#dispositivos-list th,
#catalogo-list th,
#gastos-list th {
    background: var(--surface-muted);
    color: var(--ink-soft);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

#clientes-list td,
#zonas-list td,
#sedes-list td,
#perfiles-list td,
#dispositivos-list td,
#catalogo-list td,
#gastos-list td {
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--ink);
    vertical-align: middle;
}

#clientes-list tr:last-child td,
#zonas-list tr:last-child td,
#sedes-list tr:last-child td,
#perfiles-list tr:last-child td,
#dispositivos-list tr:last-child td,
#catalogo-list tr:last-child td,
#gastos-list tr:last-child td {
    border-bottom: none;
}

/* ═══════════════════════════════════════════
   Tema claro — texto fuerte y badges visibles
   ═══════════════════════════════════════════ */

/* Headers de tabla — color legible en fondo claro */
body:not(.app-not-authenticated) .profiles-table th,
body:not(.app-not-authenticated) .reportar-table th,
body:not(.app-not-authenticated) .dashboard-table th,
body:not(.app-not-authenticated) .data-table th {
    color: #4a3c31;
    background: #f8f5f2;
    border-bottom: 2px solid #e2d9d1;
    font-weight: 700;
    font-size: 11px;
}

/* Celdas de tabla — texto oscuro y legible */
body:not(.app-not-authenticated) .profiles-table td,
body:not(.app-not-authenticated) .reportar-table td,
body:not(.app-not-authenticated) .dashboard-table td,
body:not(.app-not-authenticated) .data-table td {
    color: #35131a;
    font-size: 13.5px;
}

/* Role badges — colores sólidos para fondo blanco */
.role-admin    { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.role-gerente  { background: #faf1da; color: #73202f; border-color: #e5bb5c; }
.role-tecnico  { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.role-auxiliar { background: #faf1da; color: #73202f; border-color: #eed08f; }
.role-supervisor { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }

/* Zona badge — visible en claro */
.zona-badge {
    background: #efe9e3;
    color: #4a3c31;
    border-color: #e2d9d1;
    font-weight: 600;
}

/* Avatar de perfil */
.profile-avatar {
    color: #35131a;
    font-weight: 700;
}

/* Nombre de usuario en tabla */
.profiles-table .user-name,
.profiles-table td:first-child span:not(.profile-avatar) {
    color: #35131a;
    font-weight: 600;
}

/* Section header del panel de perfiles */
.profiles-section-header {
    background: #f8f5f2;
    border-bottom: 1px solid #e2d9d1;
}

.profiles-section-title {
    color: #35131a;
    font-weight: 700;
}

.profiles-count {
    background: #5c1a28;
    color: #ffffff;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
}

/* Filas hover más nítido */
body:not(.app-not-authenticated) .profiles-table tbody tr:hover td {
    background: #f5f7ff;
}

/* Form labels global — más peso */
.form-group label,
.form-label {
    color: #4a3c31;
    font-weight: 600;
}

/* Subtítulos y textos secundarios — más oscuros */
.section-subtitle,
.muted-text {
    color: #56534c;
}

/* Reportar table — mismo tratamiento */
.reportar-table thead th {
    color: #4a3c31;
    background: #f8f5f2;
    font-weight: 700;
}

.reportar-table td {
    color: #35131a;
}

/* ═══════════════════════════════════════════
   Planificador — Layout rediseñado v2
   Topbar estático + chips + calendario compacto + modal flotante
   ═══════════════════════════════════════════ */

/* ── Topbar ─────────────────────────────── */
.planner-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.planner-topbar-left {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.planner-topbar-left h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-light, #f8fafc);
    line-height: 1.2;
}

.planner-user-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted, #a89686);
    text-transform: lowercase;
}

.planner-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Chips de resumen ───────────────────── */
.planner-month-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.planner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--text-light, #f8fafc);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.planner-chip-selected {
    background: rgba(232, 98, 42, 0.15);
    border-color: rgba(232, 98, 42, 0.4);
    color: var(--brand-primary, #5c1a28);
    font-weight: 600;
}

/* ── Calendario compacto ────────────────── */
#planner-view .planner-calendar-panel {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

#planner-view .planner-calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

#planner-view .planner-weekdays {
    margin-bottom: 0.2rem;
}

#planner-view .planner-grid {
    min-height: unset;
    gap: 0.3rem;
}

/* Celdas compactas */
#planner-view .planner-day {
    min-height: 44px;
    padding: 0.25rem 0.3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.15rem;
}

#planner-view .planner-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    width: 100%;
}

#planner-view .planner-day-number {
    font-size: 0.82rem;
    line-height: 1.2;
}

/* Puntos coloreados por zona para días con tareas */
#planner-view .planner-day-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    justify-content: center;
    max-width: 2.2rem;
}

.planner-day-spacer {
    background: transparent;
    border: none;
    pointer-events: none;
}

#planner-view .planner-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary, #5c1a28);
    flex-shrink: 0;
}

/* Ocultar pills antiguas */
#planner-view .planner-day-tasks,
#planner-view .planner-day-count {
    display: none;
}

/* ── Tracking header inline ─────────────── */
.planner-tracking-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #a89686);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Modal flotante Nueva tarea ─────────── */
.planner-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

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

.planner-modal {
    background: #45141e;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1.25rem;
    width: 100%;
    max-width: 880px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.planner-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.planner-modal-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light, #f8fafc);
}

.planner-modal-close {
    background: none;
    border: none;
    color: var(--text-muted, #a89686);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
    transition: color 0.2s, background 0.2s;
}

.planner-modal-close:hover {
    color: var(--text-light, #f8fafc);
    background: rgba(148, 163, 184, 0.12);
}

/* Form dentro del modal */
#planner-view .planner-modal .planner-task-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

#planner-view .planner-modal .planner-task-form.hidden {
    display: flex; /* visibilidad la controla el overlay */
}

/* Body del modal: dos columnas (campos | técnicos) */
.planner-modal-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
}

.planner-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Columna de técnicos */
.planner-form-assignees {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    padding-left: 1.25rem;
}

.planner-assignee-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #a89686);
}

/* Checklist de técnicos siempre visible */
.planner-form-assignees .planner-assignee-checklist {
    flex: 1;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.75rem;
    padding: 0.5rem;
    background: rgba(2, 6, 23, 0.4);
}

/* Grid del formulario: 2 columnas fijas */
.planner-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
}

.planner-form-grid .form-group {
    margin: 0;
}

.planner-form-span2 {
    grid-column: span 2;
}

@media (max-width: 700px) {
    .planner-modal-body {
        grid-template-columns: 1fr;
    }
    .planner-form-assignees {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.15);
        padding-left: 0;
        padding-top: 1rem;
    }
    .planner-form-span2 { grid-column: span 1; }
    .planner-form-grid { grid-template-columns: 1fr; }
}

/* ── Técnicos colapsable ────────────────── */
.planner-assignee-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.planner-assignee-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--text-light, #f8fafc);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0;
    transition: color 0.2s;
}

.planner-assignee-toggle:hover {
    color: var(--brand-primary, #5c1a28);
}

.planner-toggle-arrow {
    transition: transform 0.25s ease;
    opacity: 0.7;
}

.planner-assignee-section.open .planner-toggle-arrow {
    transform: rotate(180deg);
}

.planner-assignee-checklist {
    max-height: 0;
    overflow: hidden;
    /* Excepcion intencional: animar max-height es la unica via sin medir
       altura en JS. Coste de layout acotado a un contenedor plegable. */
    transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    padding: 0;
    background: transparent;
}

.planner-assignee-section.open .planner-assignee-checklist {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.8rem;
    padding: 0.55rem;
    background: rgba(2, 6, 23, 0.55);
    margin-top: 0.4rem;
}

/* ── Tooltip flotante del día ───────────── */
.planner-day-tooltip {
    position: absolute;
    z-index: 1100;
    background: #45141e;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.8rem;
    padding: 0.6rem 0.85rem;
    min-width: 200px;
    max-width: 260px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.planner-day-tooltip.hidden {
    display: none;
}

.planner-day-tooltip .pt-date {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-primary, #5c1a28);
    text-transform: capitalize;
    margin-bottom: 0.4rem;
}

.planner-day-tooltip .pt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.planner-day-tooltip .pt-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.planner-day-tooltip .pt-title {
    font-size: 0.8rem;
    color: var(--text-light, #f8fafc);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-day-tooltip .pt-status {
    font-size: 0.7rem;
    color: var(--text-muted, #a89686);
    white-space: nowrap;
}

.planner-day-tooltip .pt-more {
    font-size: 0.75rem;
    color: var(--text-muted, #a89686);
    justify-content: flex-end;
}

/* ── Light-mode overrides ───────────────── */
body:not(.app-not-authenticated) .planner-topbar-left h3 {
    color: #35131a;
}

body:not(.app-not-authenticated) .planner-user-subtitle {
    color: #8a7767;
}

body:not(.app-not-authenticated) .planner-chip {
    background: #f8f5f2;
    border-color: #e2d9d1;
    color: #4a3c31;
}

body:not(.app-not-authenticated) .planner-chip-selected {
    background: #faf1f3;
    border-color: #c08894;
    color: #9c4453;
}

body:not(.app-not-authenticated) .planner-assignee-toggle {
    color: #4a3c31;
}

body:not(.app-not-authenticated) .planner-modal {
    background: #ffffff;
    border-color: #e2d9d1;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

body:not(.app-not-authenticated) .planner-modal-header {
    border-color: #efe9e3;
}

body:not(.app-not-authenticated) .planner-modal-header h4 {
    color: #35131a;
}

body:not(.app-not-authenticated) .planner-modal-close {
    color: #8a7767;
}

body:not(.app-not-authenticated) .planner-modal-close:hover {
    color: #35131a;
    background: #f8f5f2;
}

body:not(.app-not-authenticated) #planner-view .planner-modal .planner-task-form {
    background: transparent;
}

body:not(.app-not-authenticated) .planner-form-assignees {
    border-color: #efe9e3;
}

body:not(.app-not-authenticated) .planner-form-assignees .planner-assignee-checklist {
    background: #f5f7ff;
    border-color: #e2d9d1;
}

body:not(.app-not-authenticated) .planner-assignee-option {
    background: #ffffff;
    border-color: #e2d9d1;
}

body:not(.app-not-authenticated) .planner-assignee-option span {
    color: #35131a;
}

body:not(.app-not-authenticated) .planner-day-tooltip {
    background: #ffffff;
    border-color: #e2d9d1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

body:not(.app-not-authenticated) .planner-day-tooltip .pt-title {
    color: #35131a;
}

body:not(.app-not-authenticated) .planner-tracking-label {
    color: #8a7767;
}

/* ════════════════════════════════════════════════════════════
   RESET — anula reglas antiguas del planner que rompen el modal
   Selectores más específicos que las reglas en @media de arriba
   ════════════════════════════════════════════════════════════ */

/* El form DENTRO del modal NO debe ser grid (anula las reglas antiguas) */
#planner-view .planner-modal #planner-task-form,
body:not(.app-not-authenticated) #planner-view .planner-modal #planner-task-form {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: unset !important;
    width: 100% !important;
}

/* Cuando el overlay está oculto, el form también (pero solo vía overlay, no hidden class) */
#planner-view .planner-modal #planner-task-form.hidden,
body:not(.app-not-authenticated) #planner-view .planner-modal #planner-task-form.hidden {
    display: flex !important; /* el overlay controla la visibilidad */
}

/* Anula los order: de los form-group dentro del modal — NO tocar grid-column aquí */
#planner-view .planner-modal #planner-task-form .form-group,
body:not(.app-not-authenticated) #planner-view .planner-modal #planner-task-form .form-group {
    order: unset !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* planner-form-span2 dentro del modal: span 2 columnas del inner grid */
#planner-view .planner-modal .planner-form-span2,
#planner-view .planner-modal #planner-task-form .planner-form-span2,
body:not(.app-not-authenticated) #planner-view .planner-modal .planner-form-span2,
body:not(.app-not-authenticated) #planner-view .planner-modal #planner-task-form .planner-form-span2 {
    grid-column: 1 / -1 !important;
}

/* El modal-body: dos columnas con stretch para igualar altura */
#planner-view .planner-modal-body,
body:not(.app-not-authenticated) #planner-view .planner-modal-body {
    display: grid !important;
    grid-template-columns: 1fr 250px !important;
    gap: 1.25rem !important;
    padding: 1rem 1.25rem !important;
    align-items: stretch !important;
}

/* La columna de campos: grid 2 columnas fijas */
#planner-view .planner-form-fields,
body:not(.app-not-authenticated) #planner-view .planner-form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-width: 0 !important;
}

#planner-view .planner-form-grid,
body:not(.app-not-authenticated) #planner-view .planner-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem 0.85rem !important;
    width: 100% !important;
}

/* Columna de técnicos: se estira hasta la misma altura que la columna de campos */
#planner-view .planner-form-assignees,
body:not(.app-not-authenticated) #planner-view .planner-form-assignees {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
    align-self: stretch !important;
    border-left: 1px solid rgba(148, 163, 184, 0.18) !important;
    padding-left: 1rem !important;
}

/* Checklist ocupa todo el alto disponible en la columna derecha */
#planner-view .planner-form-assignees .planner-assignee-checklist,
body:not(.app-not-authenticated) #planner-view .planner-form-assignees .planner-assignee-checklist {
    flex: 1 !important;
    max-height: unset !important;
    overflow-y: auto !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 0.75rem !important;
    padding: 0.5rem !important;
    background: rgba(2, 6, 23, 0.35) !important;
}

body:not(.app-not-authenticated) #planner-view .planner-form-assignees .planner-assignee-checklist {
    background: #f5f7ff !important;
    border-color: #e2d9d1 !important;
}

body:not(.app-not-authenticated) #planner-view .planner-form-assignees {
    border-color: #efe9e3 !important;
}

/* Acciones del form en el modal */
#planner-view .planner-modal .planner-form-actions,
body:not(.app-not-authenticated) #planner-view .planner-modal .planner-form-actions {
    display: flex !important;
    gap: 0.75rem !important;
    order: unset !important;
    grid-column: unset !important;
    padding: 0.75rem 1.25rem 1.25rem !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    margin: 0 !important;
}

body:not(.app-not-authenticated) #planner-view .planner-modal .planner-form-actions {
    border-top-color: #efe9e3 !important;
}

/* Textarea descripción: altura libre */
#planner-view .planner-modal #planner-task-description,
body:not(.app-not-authenticated) #planner-view .planner-modal #planner-task-description {
    min-height: 68px !important;
    height: auto !important;
    resize: vertical !important;
}

/* ── Mini calendario dentro del modal ───────────────────── */
.planner-mini-cal {
    margin: 0 1.25rem;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.planner-mini-cal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.planner-mini-month-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-light, #f8fafc);
    min-width: 110px;
    text-align: center;
}

.planner-mini-nav {
    background: none;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.4rem;
    color: var(--text-muted, #a89686);
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.planner-mini-nav:hover {
    border-color: var(--brand-primary, #5c1a28);
    color: var(--brand-primary, #5c1a28);
}

.planner-mini-selected-label {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted, #a89686);
    white-space: nowrap;
}

.planner-mini-selected-label strong {
    color: var(--brand-primary, #5c1a28);
    font-weight: 700;
}

.planner-mini-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.2rem;
    margin-bottom: 0.25rem;
}

.planner-mini-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted, #a89686);
    letter-spacing: 0.04em;
}

.planner-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.2rem;
}

.pmini-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    padding: 0;
    height: 30px;
    font-size: 0.78rem;
    color: var(--text-light, #f8fafc);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
    line-height: 30px;
}

.pmini-day:hover:not(:disabled) {
    background: rgba(232, 98, 42, 0.15);
    border-color: rgba(232, 98, 42, 0.4);
    color: var(--brand-primary, #5c1a28);
}

.pmini-day.pmini-other {
    color: var(--text-muted, #a89686);
    opacity: 0.45;
}

.pmini-day.pmini-today {
    border-color: rgba(232, 98, 42, 0.5);
    font-weight: 700;
}

.pmini-day.pmini-selected {
    background: var(--brand-primary, #5c1a28);
    border-color: var(--brand-primary, #5c1a28);
    color: #ffffff !important;
    font-weight: 700;
}

.pmini-day.pmini-in-range {
    background: rgba(232, 98, 42, 0.18);
    border-color: rgba(232, 98, 42, 0.25);
    color: var(--brand-primary, #5c1a28);
    border-radius: 0;
}

.pmini-day.pmini-range-start {
    border-radius: 0.35rem 0 0 0.35rem;
}

.pmini-day.pmini-range-end {
    border-radius: 0 0.35rem 0.35rem 0;
}

.pmini-day.pmini-past {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Light-mode overrides para el mini cal */
body:not(.app-not-authenticated) .planner-mini-cal {
    border-color: #efe9e3;
}

body:not(.app-not-authenticated) .planner-mini-month-label {
    color: #35131a;
}

body:not(.app-not-authenticated) .pmini-day {
    color: #35131a;
}

body:not(.app-not-authenticated) .pmini-day.pmini-other {
    color: #a89686;
}

body:not(.app-not-authenticated) .planner-mini-nav {
    border-color: #e2d9d1;
    color: #8a7767;
}

/* Reset de reglas antiguas para el mini cal (evita herencia de planner-grid) */
#planner-view .planner-mini-cal,
body:not(.app-not-authenticated) #planner-view .planner-mini-cal {
    min-height: unset !important;
    gap: unset !important;
}

/* Responsive: columna única en pantallas pequeñas */
@media (max-width: 680px) {
    #planner-view .planner-modal-body,
    body:not(.app-not-authenticated) #planner-view .planner-modal-body {
        grid-template-columns: 1fr !important;
    }
    #planner-view .planner-form-assignees,
    body:not(.app-not-authenticated) #planner-view .planner-form-assignees {
        border-left: none !important;
        border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
        padding-left: 0 !important;
        padding-top: 0.75rem !important;
    }
    #planner-view .planner-form-grid,
    body:not(.app-not-authenticated) #planner-view .planner-form-grid {
        grid-template-columns: 1fr !important;
    }
    #planner-view .planner-modal .planner-form-span2,
    body:not(.app-not-authenticated) #planner-view .planner-modal .planner-form-span2 {
        grid-column: span 1 !important;
    }
}

/* ── Reportar mobile cards: hidden on desktop ───────────────── */
.rpt-mobile-wrap  { display: none; }
.reportar-desktop-wrap { display: block; }

/* ── Reports view mobile content: hidden on desktop ─────────── */
.ri-accent-bar    { display: none; }
.ri-mobile-content { display: none; }
.report-desktop-content { display: block; }

/* ── Reportar mobile card styles (all screens — only shown via media) ── */
.rpt-card {
    background: #ffffff;
    border: 0.5px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.rpt-accent-bar { height: 3px; width: 100%; }

.rpt-body { padding: 14px 16px; }

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

.rpt-head-copy { flex: 1; min-width: 0; }

.rpt-equipo {
    font-size: 15px;
    font-weight: 500;
    color: #241c17;
    margin: 0 0 2px;
}

.rpt-activity { font-size: 11px; color: #888780; margin: 0; }

.rpt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rpt-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.rpt-tag-revision  { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
.rpt-tag-pendiente { background: #faf1da; color: #5c4208; border: 1px solid #d9a62e; }
.rpt-tag-aprobado  { background: #E6F1FB; color: #0C447C; border: 1px solid #85B7EB; }

.rpt-divider { height: 0.5px; background: rgba(0,0,0,0.08); margin: 10px 0; }

.rpt-field-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.rpt-field-icon { font-size: 14px; color: #888780; margin-top: 1px; flex-shrink: 0; }

.rpt-field-label {
    font-size: 10px;
    font-weight: 500;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 60px;
    padding-top: 1px;
    flex-shrink: 0;
}

.rpt-field-val { font-size: 13px; color: #241c17; }
.rpt-field-val.rpt-muted { color: #888780; }

.rpt-client-row { display: flex; align-items: center; gap: 6px; }

.rpt-client-dot {
    width: 20px; height: 20px; border-radius: 50%;
    background: #E6F1FB; color: #0C447C;
    font-size: 8px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.rpt-footer {
    padding: 10px 16px;
    border-top: 0.5px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rpt-date {
    font-size: 12px; color: #888780;
    display: inline-flex; align-items: center; gap: 5px;
}

.rpt-date i { font-size: 13px; }

.rpt-actions { display: flex; gap: 6px; }

.rpt-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; background: transparent;
    transition: opacity 0.15s;
    min-height: unset; box-shadow: none; padding: 0;
}

.rpt-btn:hover { opacity: 0.7; }

.rpt-btn-pay  { border-color: #5DCAA5; color: #0F6E56; }
.rpt-btn-del  { border-color: #F09595; color: #A32D2D; }
.rpt-btn-view { border-color: #93C5FD; color: #1D4ED8; }
.rpt-btn-edit { border-color: #e5bb5c; color: #73202f; }

.rpt-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rpt-section-title {
    font-size: 14px; font-weight: 500; color: #241c17;
    display: flex; align-items: center; gap: 8px;
}

.rpt-section-title i { font-size: 16px; color: #888780; }

.rpt-badge-count {
    background: #9c4453; color: #faf1f3;
    font-size: 11px; font-weight: 500;
    border-radius: 999px; padding: 2px 8px;
}

.rpt-empty { text-align: center; color: var(--text-muted); font-size: 0.875rem; padding: 1rem 0; }

#reportar-historial-btn.rpt-hist-active { background: rgba(46,125,50,0.1) !important; color: #2e7d32 !important; border-color: rgba(46,125,50,0.4) !important; }
.rpt-hist-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #9c4453; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Columna Acciones de la tabla reportar — ancho fijo para que los botones no se compriman */
.reportar-table .reportar-cell-acciones {
    white-space: nowrap;
    width: 90px;
    min-width: 90px;
}
.reportar-table .reportar-cell-acciones .profile-actions {
    gap: 6px;
    justify-content: flex-end;
}
.reportar-table .reportar-cell-acciones .btn-action-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
}

/* ── Informes mobile card styles (all screens — only shown via media) ── */
.ri-accent-bar { height: 3px; width: 100%; }

.ri-card-body { padding: 14px 16px 10px; }

.ri-code {
    font-size: 10px; font-weight: 500; color: #9c4453;
    letter-spacing: 0.05em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 6px;
}

.ri-code i { font-size: 12px; }

.ri-title { font-size: 15px; font-weight: 600; color: #241c17; margin: 0 0 4px; }
.ri-desc  { font-size: 12px; color: #888780; margin: 0 0 10px; line-height: 1.5; }

.ri-badges { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.ri-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 500; padding: 3px 9px;
    border-radius: 999px; white-space: nowrap;
}

.ri-tag i { font-size: 11px; }

.ri-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.ri-tag-progreso  { background: #faf1f3; color: #73202f; border: 1px solid #c08894; }
.ri-tag-abierto   { background: #E6F1FB; color: #0C447C; border: 1px solid #85B7EB; }
.ri-tag-cerrado   { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
.ri-tag-cancelado { background: #F1EFE8; color: #4a3c31; border: 1px solid #B4B2A9; }
.ri-tag-alta  { background: #FCEBEB; color: #A32D2D; border: 1px solid #F09595; }
.ri-tag-media { background: #faf1da; color: #5c4208; border: 1px solid #d9a62e; }
.ri-tag-baja  { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }

.ri-divider { height: 0.5px; background: rgba(0,0,0,0.08); margin: 10px 0; }

.ri-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}

.ri-meta-item {
    background: #f1efe8; border-radius: 8px; padding: 8px 10px;
    display: flex; align-items: center; gap: 6px;
}

.ri-meta-item i { font-size: 14px; color: #888780; flex-shrink: 0; }

.ri-meta-text { font-size: 12px; color: #241c17; }

.ri-meta-text span {
    display: block; font-size: 10px; color: #888780;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px;
}

.ri-footer {
    padding: 10px 16px;
    border-top: 0.5px solid rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ri-footer-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.ri-footer-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

.ri-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; background: transparent;
    transition: opacity 0.15s; min-height: unset; box-shadow: none; padding: 0;
}

.ri-btn:hover { opacity: 0.7; }

.ri-btn-view    { border-color: #85B7EB; color: #185FA5; }
.ri-btn-edit    { border-color: #B4B2A9; color: #6b5a4c; }
.ri-btn-del     { border-color: #F09595; color: #A32D2D; }
.ri-btn-upload  { border-color: #5DCAA5; color: #0F6E56; }
.ri-btn-cotizar { border-color: #d9a62e; color: #7a5810; }
/* Firma a distancia: solo aparece en informes sin firma del cliente. */
.ri-btn-firma   { border-color: #c08894; color: #73202f; }
.ri-btn-firma svg { width: 17px; height: 17px; }

/* ── Mobile-only task card elements: hidden on desktop ─────── */
.ta-accent-bar,
.ta-avatar,
.ta-tag-icon,
.ta-status-dot,
.ta-desc-icon,
.ta-date-icon,
.ta-action-icon {
    display: none;
}

.ta-group-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== TAREAS VIEW — LIGHT MODE OVERRIDES ===== */
.tasks-group {
    background: #f8f7f4 !important;
    border-color: #e0ded8 !important;
}

.task-card {
    background: #ffffff !important;
    border-color: #e0ded8 !important;
    box-shadow: 0 1px 4px rgba(32, 27, 21, 0.07) !important;
}

.task-card:hover {
    border-color: rgba(255, 91, 31, 0.4) !important;
    box-shadow: 0 3px 12px rgba(255, 91, 31, 0.1) !important;
}

.task-card-title-block h4 {
    color: #241c17 !important;
}

.task-card-description {
    color: #3d3a34 !important;
}

/* Botón "Ejecutar tarea" — icono circular */
.task-exec-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 138, 74, 0.1);
    border: 1.5px solid rgba(22, 138, 74, 0.35);
    color: #168a4a;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.task-exec-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.task-exec-btn:hover,
.task-exec-btn:focus-visible {
    background: rgba(22, 138, 74, 0.2);
    border-color: rgba(22, 138, 74, 0.65);
    box-shadow: 0 3px 10px rgba(22, 138, 74, 0.22);
    transform: scale(1.1);
    outline: none;
}

/* ============================================================
   LAYOUT MÓVIL NATIVO (Android-like) — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

    /* ── App bar superior — 2 filas en móvil ───────────────── */
    /*
     * Fila 1: título (h2) ancho completo
     * Fila 2: subtítulo (p) izquierda | botones derecha
     * Se logra con grid + display:contents en .section-title-block
     */
    #main-content > .section-header {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        height: auto !important;
        min-height: 60px !important;
        padding: 0.5rem 0.9rem 0.45rem !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e8e6e1 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background: #ffffff !important;
        box-shadow: 0 1px 4px rgba(32,27,21,0.08) !important;
        column-gap: 8px !important;
        row-gap: 1px !important;
    }

    /* Los hijos de .section-title-block participan directamente en el grid */
    #main-content > .section-header .section-title-block {
        display: contents !important;
    }

    /* Fila 1, columna 1-2: título ancho completo */
    #main-content > .section-header .section-title-block h2,
    #main-content > .section-header h2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        color: #241c17 !important;
    }

    /* Fila 2, columna 1: subtítulo */
    #main-content > .section-header .section-subtitle,
    #main-content > .section-header #header-user-role {
        grid-column: 1 !important;
        grid-row: 2 !important;
        font-size: 0.72rem !important;
        margin: 0 !important;
        color: #6d6a62 !important;
        align-self: center !important;
    }

    /* Fila 1-2, columna 2: botones alineados al centro vertical */
    #main-content > .section-header .header-actions {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        align-self: center !important;
    }

    /* ── Área de contenido ──────────────────────────────────── */
    #main-content {
        padding: 0.65rem 0.65rem 80px !important;
    }

    /* ── Bottom nav pill — compacto en móvil ────────────────── */
    #bottom-nav {
        bottom: 8px !important;
        width: calc(100% - 16px) !important;
        padding: 5px 8px !important;
        padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
        border-radius: 12px !important;
    }

    #bottom-nav .nav-button {
        padding: 5px 7px !important;
        font-size: 9px !important;
        gap: 2px !important;
        border-radius: 6px !important;
    }

    #bottom-nav .nav-button i {
        font-size: 18px !important;
    }

    .nav-date-badge {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }

    .nav-divider-line {
        height: 28px !important;
    }

    /* ── Task groups — fondo claro forzado ──────────────────── */
    .tasks-group {
        background: #f5f4f1 !important;
        border-color: #e0ded8 !important;
        border-radius: 0.75rem !important;
        padding: 0.75rem !important;
        gap: 0.65rem !important;
    }

    .tasks-group-header h4 {
        font-size: 0.88rem !important;
        color: #241c17 !important;
    }

    .tasks-group-count {
        color: #4a4742 !important;
        font-size: 0.7rem !important;
    }

    /* ── Task cards — compactas y blancas ───────────────────── */
    .task-card {
        background: #ffffff !important;
        border-color: #e8e6e1 !important;
        border-radius: 0.75rem !important;
        padding: 0.75rem 0.8rem !important;
        gap: 0.5rem !important;
        box-shadow: 0 1px 3px rgba(32,27,21,0.06) !important;
    }

    .task-card-title-block h4 {
        font-size: 0.9rem !important;
        color: #17120f !important;
    }

    .task-card-assignee {
        font-size: 0.72rem !important;
        color: #4a4742 !important;
    }

    .task-card-description {
        font-size: 0.82rem !important;
        color: #3d3a34 !important;
    }

    .task-card-footer {
        font-size: 0.78rem !important;
        color: #4a4742 !important;
    }

    .task-card-actions {
        gap: 0.4rem !important;
    }

    .task-status-tag,
    .task-origin-tag,
    .task-priority-badge {
        font-size: 0.65rem !important;
        padding: 0.18rem 0.55rem !important;
    }

    .task-exec-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .task-exec-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .btn-action-icon {
        width: 30px !important;
        height: 30px !important;
    }

    /* ── Cards generales ────────────────────────────────────── */
    .card {
        border-radius: 0.75rem !important;
        padding: 0.85rem !important;
    }

    /* ── Planner — más compacto en móvil ────────────────────── */
    #planner-view .planner-topbar {
        padding: 0.6rem 0.75rem !important;
    }

    #planner-view .planner-topbar h3 {
        font-size: 1rem !important;
    }

    #planner-view .planner-month-summary {
        gap: 0.4rem !important;
        padding: 0 0 0.4rem !important;
    }

    #planner-view .planner-chip {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.65rem !important;
    }

    #planner-view .planner-calendar-panel {
        padding: 0.5rem !important;
    }

    #planner-view .planner-day {
        min-height: 52px !important;
        padding: 0.28rem !important;
        border-radius: 6px !important;
    }

    #planner-view .planner-day-number {
        font-size: 0.78rem !important;
    }

    /* ── Botones de acción ──────────────────────────────────── */
    .btn {
        font-size: 0.82rem !important;
        padding: 0.5rem 0.9rem !important;
    }

    /* ── Modal — ocupa toda la pantalla en móvil ────────────── */
    .planner-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
    }

    .planner-modal-body {
        grid-template-columns: 1fr !important;
    }

    .planner-form-assignees {
        border-left: none !important;
        border-top: 1px solid #e0ded8 !important;
        padding-left: 0 !important;
    }

    /* ── Report cards ───────────────────────────────────────── */
    .report-card {
        border-radius: 0.75rem !important;
        padding: 0.75rem !important;
    }

    /* ── Reportar view ──────────────────────────────────────── */
    .form-group {
        margin-bottom: 0.65rem !important;
    }

    .form-group label {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    input, select, textarea {
        font-size: 0.88rem !important;
        padding: 0.55rem 0.75rem !important;
    }

    /* ── Planner: ocultar topbar duplicada (el header ya trae Nueva tarea) ── */
    #planner-view .planner-topbar {
        display: none !important;
    }

    /* ── Botones permanentes del header: mismo tamaño 32px ── */
    #notifications-btn,
    #back-btn,
    #menu-btn {
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* Botones contextuales: tamaño solo cuando son visibles (no override .hidden) */
    #topbar-add-task-btn:not(.hidden),
    #topbar-add-report-btn:not(.hidden) {
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* Back y menú: mismo estilo naranja que notificación y + */
    #back-btn,
    #menu-btn {
        background: #4a1420 !important;
        border: none !important;
        color: #ffffff !important;
    }

    #back-btn:hover,
    #menu-btn:hover {
        background: #9c4453 !important;
    }

    #back-btn svg,
    #menu-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Ocultar label de texto en botones contextuales */
    #topbar-add-task-btn .topbar-btn-label,
    #topbar-add-report-btn .topbar-btn-label {
        display: none !important;
    }

    /* ── Chips: fila horizontal compacta ───────────────────── */
    .planner-month-summary,
    #planner-view .planner-month-summary {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.4rem !important;
        padding-bottom: 0.25rem !important;
        margin-bottom: 0.5rem !important;
        scrollbar-width: none !important;
    }

    .planner-month-summary::-webkit-scrollbar {
        display: none !important;
    }

    .planner-chip {
        flex-shrink: 0 !important;
        font-size: 0.72rem !important;
        padding: 0.28rem 0.6rem !important;
        white-space: nowrap !important;
    }

    /* ── Tracking table: separador entre filas ──────────────── */
    #planner-view .planner-tracking-table thead {
        display: none !important;
    }

    #planner-view .planner-tracking-table,
    #planner-view .planner-tracking-table tbody,
    #planner-view .planner-tracking-table tr,
    #planner-view .planner-tracking-table td {
        display: block !important;
        width: 100% !important;
    }

    #planner-view .planner-tracking-table tbody tr {
        background: #ffffff !important;
        border: 1px solid rgba(255, 91, 31, 0.25) !important;
        border-radius: 0.65rem !important;
        margin-bottom: 0.65rem !important;
        padding: 0.6rem 0.75rem !important;
        box-shadow: 0 1px 4px rgba(255, 91, 31, 0.07) !important;
    }

    #planner-view .planner-tracking-table td {
        padding: 0.22rem 0 !important;
        border: none !important;
        display: flex !important;
        gap: 0.4rem !important;
        align-items: flex-start !important;
        font-size: 0.8rem !important;
    }

    #planner-view .planner-tracking-table td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        font-size: 0.65rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--text-muted) !important;
        min-width: 72px !important;
        padding-top: 2px !important;
    }

    #planner-view .planner-tracking-table td strong {
        font-size: 0.84rem !important;
    }

    #planner-view .planner-tracking-table td small {
        font-size: 0.72rem !important;
        max-width: none !important;
    }

    #planner-view .planner-tracking-action {
        width: 100% !important;
        text-align: center !important;
        margin-top: 0.25rem !important;
    }
}

/* ===== TOPBAR: botón "Nuevo informe" con ícono + badge ===== */
#topbar-add-report-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#topbar-add-report-btn .ti {
    font-size: 18px;
    line-height: 1;
}

.topbar-report-plus {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: #ffffff;
    color: #4a1420;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== REPORTS: filtros siempre en una sola fila ===== */
#reports-view .reports-status-filters,
body:not(.app-not-authenticated) #reports-view .reports-status-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    gap: 0.4rem !important;
}

#reports-view .reports-status-filter,
body:not(.app-not-authenticated) #reports-view .reports-status-filter {
    flex: 1 1 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.42rem 0.35rem !important;
    font-size: 0.72rem !important;
    min-width: 0 !important;
}

/* ===== REPORTS: lista de tarjetas ===== */
.reports-cards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.reports-cards-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.reports-cards-count {
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 600;
}

.reports-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ── Report card: light-mode completo ── */
#reports-view .report-card {
    background: #ffffff !important;
    border-color: #e8e6e1 !important;
    box-shadow: 0 1px 6px rgba(32,27,21,0.07) !important;
    gap: 0.75rem !important;
}

#reports-view .report-card-kicker {
    color: var(--brand-primary) !important;
    font-size: 0.72rem !important;
}

#reports-view .report-card-kicker::before {
    display: none !important;
}

#reports-view .report-card-info h4 {
    color: #241c17 !important;
    font-size: 0.95rem !important;
    font-family: var(--mgm-sans);
}

#reports-view .report-card-info p {
    color: #6d6a62 !important;
    font-size: 0.82rem !important;
    margin-top: 0.2rem !important;
}

/* Meta: grid 2 columnas con pastillas suaves */
#reports-view .report-card-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
}

#reports-view .report-card-meta-item {
    background: #f5f4f1 !important;
    border: 1px solid #e8e6e1 !important;
    border-radius: 0.6rem !important;
    padding: 0.4rem 0.65rem !important;
}

#reports-view .report-card-meta-item span {
    color: #3d3a34 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Botones de acción */
#reports-view .report-card-actions {
    border-top: 1px solid #f0ede8 !important;
    padding-top: 0.5rem !important;
}

#reports-view .report-card-actions-btn {
    background: #f5f4f1 !important;
    border: 1px solid #e8e6e1 !important;
    color: #4a4742 !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#reports-view .report-card-actions-btn:hover {
    background: #ede9e2 !important;
    color: #241c17 !important;
}

#reports-view .report-card-actions-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.reports-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.reports-empty-text {
    font-size: 0.9rem;
}

/* ── Planner tracking cards (mobile card design) ─────────── */
.planner-tracking-cards-wrap {
    display: none; /* shown only on mobile via media query */
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.5rem;
}

.pt-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 1.5rem 0;
}

.pt-card {
    background: #ffffff;
    border: 0.5px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
}

.pt-card-done { opacity: 0.6; }

.pt-card-accent {
    height: 4px;
    background: #d9a62e;
}

.pt-card-body { padding: 14px 16px; }

.pt-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.pt-card-copy { flex: 1; min-width: 0; }

.pt-card-title {
    font-size: 15px;
    font-weight: 500;
    color: #241c17;
    margin: 0 0 2px;
}

.pt-card-sub {
    font-size: 12px;
    color: #888780;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.pt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.pt-tag i { font-size: 12px; }

.pt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pt-tag-urgente  { background: #FCEBEB; color: #A32D2D; border: 1px solid #F09595; }
.pt-tag-alta     { background: #faf1f3; color: #73202f; border: 1px solid #eed08f; }
.pt-tag-normal   { background: #fdf8ec; color: #8a6512; border: 1px solid #eed08f; }
.pt-tag-bajo     { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
.pt-tag-pendiente{ background: #E6F1FB; color: #0C447C; border: 1px solid #85B7EB; }
.pt-tag-proceso  { background: #faf1da; color: #5c4208; border: 1px solid #d9a62e; }
.pt-tag-ok       { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
.pt-tag-cancelado{ background: #F1EFE8; color: #4a3c31; border: 1px solid #B4B2A9; }

.pt-divider {
    height: 0.5px;
    background: rgba(0,0,0,0.08);
    margin: 10px 0;
}

.pt-field-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 13px;
}

.pt-field-icon {
    color: #888780;
    font-size: 15px;
    margin-top: 1px;
    flex-shrink: 0;
}

.pt-field-label {
    font-size: 10px;
    font-weight: 500;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 74px;
    padding-top: 1px;
    flex-shrink: 0;
}

.pt-field-val {
    color: #241c17;
    font-size: 13px;
    line-height: 1.3;
}

.pt-client-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pt-client-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E6F1FB;
    color: #0C447C;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}

.pt-card-footer {
    padding: 10px 16px;
    border-top: 0.5px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pt-date-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #888780;
}

.pt-date-pill i { font-size: 14px; }

.pt-btn-ver {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
    border: 1px solid;
    background: none;
    white-space: nowrap;
    min-height: unset;
    box-shadow: none;
    letter-spacing: 0;
}

.pt-btn-ver:hover { opacity: 0.8; }
.pt-btn-ver i { font-size: 13px; }

.pt-btn-urgente { color: #A32D2D; background: #FCEBEB; border-color: #F09595; }
.pt-btn-alta    { color: #73202f; background: #faf1f3; border-color: #eed08f; }
.pt-btn-normal  { color: #8a6512; background: #fdf8ec; border-color: #eed08f; }
.pt-btn-ok      { color: #27500A; background: #EAF3DE; border-color: #97C459; }

/* ── Historial attendance chips (all screens) ───────────── */
.att-entries-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.att-entry-card {
    background: #ffffff;
    border: 1px solid #e8e6e1;
    border-radius: 0.9rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.att-entry-date {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3d3a34;
    text-transform: capitalize;
}

.att-entry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.att-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f5f4f1;
    border: 1px solid #e8e6e1;
    color: #4a4742;
}

.att-chip-zona  { background: #eef3ff; border-color: #c7d4f5; color: #3a4f9a; }
.att-chip-sede  { background: #f0faf0; border-color: #b8dcb8; color: #2d6e2d; }
.att-chip-time  { background: #fdf8ec; border-color: #f5e6c0; color: #7a5810; }
.att-chip-hours { background: #fef3f2; border-color: #fbc8c2; color: #a13020; font-weight: 700; }
.att-chip-events { background: #f5f4f1; border-color: #dedad4; color: #6b6660; }
.att-chip-closed    { background: #eaf3de; border-color: #b8d699; color: #2d5a14; }
.att-chip-open      { background: #fdf8ec; border-color: #eed08f; color: #7a5810; }
.att-chip-cancelled { background: #fff0f0; border-color: #f5b8b8; color: #9a2020; }

@media (max-width: 480px) {

    /* ── Reportar: tabla oculta, cards visibles ─────────────── */
    #reportar-view .reportar-desktop-wrap { display: none !important; }
    #reportar-view .rpt-mobile-wrap       { display: block !important; }

    /* ── Tareas asignadas: nuevo diseño tarjeta ─────────────── */

    /* Grupo (contenedor blanco) */
    #tasks-view .tasks-group,
    #assigned-tasks-view .tasks-group {
        background: #ffffff !important;
        border: 0.5px solid rgba(0,0,0,0.10) !important;
        border-radius: 12px !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }

    /* Cabecera del grupo */
    #tasks-view .tasks-group-header,
    #assigned-tasks-view .tasks-group-header {
        padding: 12px 16px !important;
        border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
        background: #ffffff !important;
    }

    /* Avatar círculo */
    .ta-avatar {
        display: flex !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: #E6F1FB !important;
        color: #0C447C !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        letter-spacing: 0 !important;
    }

    #tasks-view .tasks-group-header h4,
    #assigned-tasks-view .tasks-group-header h4 {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #241c17 !important;
    }

    /* Badge conteo (azul) */
    #tasks-view .tasks-group-count,
    #assigned-tasks-view .tasks-group-count {
        background: #E6F1FB !important;
        color: #0C447C !important;
        border: 1px solid #85B7EB !important;
        border-radius: 999px !important;
        padding: 2px 9px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
    }

    /* Task cards: sin borde individual, separadas por border-bottom */
    #tasks-view .task-card,
    #assigned-tasks-view .task-card {
        border: none !important;
        border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
        border-color: rgba(0,0,0,0.08) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        display: block !important;
        overflow: hidden !important;
    }

    #tasks-view .task-card:last-child,
    #assigned-tasks-view .task-card:last-child {
        border-bottom: none !important;
    }

    #tasks-view .task-card:hover,
    #assigned-tasks-view .task-card:hover {
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Barra de acento de color (prioridad) */
    .ta-accent-bar {
        display: block !important;
        height: 3px !important;
        width: 100% !important;
    }

    /* Contenido interior */
    #tasks-view .task-card-header,
    #assigned-tasks-view .task-card-header {
        padding: 12px 16px 0 !important;
        margin-bottom: 6px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #tasks-view .task-card-title-block h4,
    #assigned-tasks-view .task-card-title-block h4 {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #241c17 !important;
    }

    /* Ocultar el assignee en la card (ya está en el header de grupo) */
    #tasks-view .task-card-assignee,
    #assigned-tasks-view .task-card-assignee {
        display: none !important;
    }

    /* Badges con íconos */
    .ta-tag-icon {
        display: inline !important;
        font-size: 11px !important;
        margin-right: 3px !important;
        vertical-align: middle !important;
    }

    /* Status dot */
    .ta-status-dot {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        margin-right: 4px !important;
        vertical-align: middle !important;
    }

    /* Descripción con ícono */
    #tasks-view .task-card-description,
    #assigned-tasks-view .task-card-description {
        padding: 0 16px 0 !important;
        font-size: 12px !important;
        color: #888780 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 0 6px !important;
    }

    .ta-desc-icon {
        display: inline !important;
        font-size: 13px !important;
        color: #888780 !important;
        flex-shrink: 0 !important;
    }

    /* Footer */
    #tasks-view .task-card-footer,
    #assigned-tasks-view .task-card-footer {
        padding: 8px 16px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Fecha con ícono */
    #tasks-view .task-card-date,
    #assigned-tasks-view .task-card-date {
        font-size: 12px !important;
        color: #888780 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .ta-date-icon {
        display: inline !important;
        font-size: 13px !important;
    }

    /* "Sin informe" → tag rojo pill */
    #tasks-view .task-report-link,
    #assigned-tasks-view .task-report-link {
        font-size: 11px !important;
        font-weight: 500 !important;
        padding: 3px 9px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: #f5f4f1 !important;
        border: 1px solid #e0ded8 !important;
        color: #4a4742 !important;
    }

    #tasks-view .task-report-link.missing,
    #assigned-tasks-view .task-report-link.missing {
        background: #FCEBEB !important;
        color: #A32D2D !important;
        border-color: #F09595 !important;
    }

    /* Botones de acción: círculos con borde de color */
    #tasks-view .task-card-actions,
    #assigned-tasks-view .task-card-actions {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    /* Ocultar SVGs, mostrar Tabler icons en móvil */
    #tasks-view .task-exec-btn svg,
    #tasks-view .btn-action-icon svg,
    #assigned-tasks-view .task-exec-btn svg,
    #assigned-tasks-view .btn-action-icon svg {
        display: none !important;
    }

    .ta-action-icon {
        display: inline !important;
        font-size: 15px !important;
    }

    /* Play button */
    #tasks-view .ta-btn-play,
    #assigned-tasks-view .ta-btn-play {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        border: 1px solid #5DCAA5 !important;
        color: #0F6E56 !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Edit button */
    #tasks-view .ta-btn-edit,
    #assigned-tasks-view .ta-btn-edit {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        border: 1px solid #B4B2A9 !important;
        color: #6b5a4c !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Delete button */
    #tasks-view .ta-btn-del,
    #assigned-tasks-view .ta-btn-del {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        border: 1px solid #F09595 !important;
        color: #A32D2D !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Orange border override removed — handled by accent bar now */
    #tasks-view .task-card,
    #assigned-tasks-view .task-card {
        border-color: rgba(0,0,0,0.08) !important;
        border-width: 0 0 0.5px 0 !important;
    }

    /* ── Planner tracking: tabla oculta, tarjetas visibles ─── */
    .planner-tracking-table-wrap { display: none !important; }
    .planner-tracking-cards-wrap { display: flex !important; }

    /* ── Contorno naranja en tarjetas clave ─────────────────── */
    #tasks-view .task-card,
    #assigned-tasks-view .task-card {
        border-color: #4a1420 !important;
        border-width: 1.5px !important;
    }

    #reports-view .report-card {
        border-color: #4a1420 !important;
        border-width: 1.5px !important;
    }

    #reportar-view .reportar-table tbody tr.reportar-row {
        border-color: #4a1420 !important;
        border-width: 1.5px !important;
    }

    /* ── Botones Historial y GPS — estilo pill Tabler ───────── */
    .btn-historial,
    .btn-gps {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 9px 16px !important;
        border-radius: 999px !important;
        border: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: opacity 0.15s !important;
        min-height: unset !important;
        box-shadow: none !important;
        letter-spacing: 0 !important;
    }

    .btn-historial {
        background: #4a3c31 !important;
        color: #f1efe8 !important;
    }

    .btn-gps {
        background: #9c4453 !important;
        color: #faf1f3 !important;
    }

    .btn-historial:hover,
    .btn-gps:hover {
        opacity: 0.88 !important;
    }

    .btn-historial i,
    .btn-gps i {
        font-size: 17px !important;
    }
}

/* ── Reportar view: botones icono y tarjetas en modo claro ───── */
#reportar-historial-btn,
#reportar-new-btn,
#reportar-refresh-btn {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

#reportar-new-btn svg,
#reportar-refresh-btn svg {
    width: 16px !important;
    height: 16px !important;
}

#reportar-historial-btn i {
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Tarjetas reportar — fondo claro */
#reportar-view .reportar-table tbody tr.reportar-row {
    background: #ffffff !important;
    border: 1px solid #e8e6e1 !important;
    box-shadow: 0 1px 6px rgba(32,27,21,0.07) !important;
}

#reportar-view .reportar-table tbody td.reportar-cell {
    color: #3d3a34 !important;
}

#reportar-view .reportar-table tbody td.reportar-cell::before {
    color: #8a8680 !important;
}

#reportar-view .reportar-table tbody tr.reportar-row:hover td {
    background: transparent !important;
}

#reportar-historial-btn,
#reportar-refresh-btn,
#reportar-new-btn {
    display: none !important;
}
body[data-current-view="reportar"] #reportar-historial-btn,
body[data-current-view="reportar"] #reportar-refresh-btn,
body[data-current-view="reportar"] #reportar-new-btn {
    display: inline-flex !important;
}

/* Task-report-link modal footer */
.task-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid #f0ece6;
    background: #fafaf9;
    border-radius: 0 0 12px 12px;
}

.task-report-footer-icons {
    display: flex;
    gap: 6px;
}

.task-rf-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e0ddd8;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.15s;
    flex-shrink: 0;
}

.task-rf-icon-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.task-rf-icon-btn:hover {
    background: #f5f3f0;
    border-color: #c8c4bc;
    color: #333;
}

.task-rf-primary-btn {
    background: #5c1a28;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.task-rf-primary-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.task-rf-primary-btn:hover {
    background: #9c4453;
}

#topbar-add-task-btn,
#topbar-add-task-btn .topbar-btn-label {
    color: #ffffff !important;
}

/* ===== INFORMES — tabla en desktop ===== */
#reports-table-header { display: none; }

/* ── Informes en teléfono/tablet: usar la tarjeta móvil (nombre arriba,
      estado+prioridad en el footer junto a las acciones) ── */
@media (max-width: 1023px) {
    #reports-view .report-desktop-content { display: none !important; }
    #reports-view .ri-mobile-content {
        display: block !important;
    }
    #reports-view .ri-accent-bar { display: block !important; }
    #reports-view .report-card {
        overflow: hidden;
        padding: 0 !important;
        gap: 0 !important;
    }
    #reports-view .report-card-header {
        gap: 0.5rem;
        flex-wrap: nowrap;
    }
    #reports-view .report-card-info h4 {
        font-size: 14px;
        white-space: normal;
    }
    #reports-view .report-card-info p {
        font-size: 12px;
        color: #8a7767;
    }
    #reports-view .report-card-badges {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 4px;
    }
    #reports-view .report-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        margin-top: 6px;
    }
    #reports-view .report-card-meta-item {
        font-size: 12px;
        color: #8a7767;
    }
    #reports-view .report-card-actions {
        margin-top: 8px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
}

@media (min-width: 1024px) {
    /* ── filtros: una sola fila (especificidad alta para ganar overrides) ── */
    body:not(.app-not-authenticated) #reports-view .reports-status-filters,
    #reports-view .reports-status-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        width: fit-content !important;
        background: #f8f5f2 !important;
        border: 1px solid #efe9e3 !important;
        border-radius: 10px !important;
        padding: 3px !important;
        margin-bottom: 16px !important;
    }
    body:not(.app-not-authenticated) #reports-view .reports-status-filter,
    #reports-view .reports-status-filter {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 6px 16px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        border-radius: 7px !important;
        border: none !important;
        background: none !important;
        color: #a89686 !important;
        cursor: pointer !important;
        min-width: unset !important;
    }
    body:not(.app-not-authenticated) #reports-view .reports-status-filter.active,
    #reports-view .reports-status-filter.active {
        background: #ffffff !important;
        color: #4a1420 !important;
        border: 1px solid #e3c5cb !important;
        font-weight: 600 !important;
    }

    /* ── cabecera de tabla ── */
    #reports-table-header {
        display: grid !important;
        grid-template-columns: 1fr 110px 90px 100px 140px 130px 100px 130px;
        gap: 8px;
        padding: 8px 20px;
        background: #f8f5f2;
        border: 1px solid #efe9e3;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        font-size: 11px;
        font-weight: 700;
        color: #a89686;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* ── contenedor lista ── */
    #reports-view #reports-list {
        background: #ffffff;
        border: 1px solid #efe9e3;
        border-top: none;
        border-radius: 0 0 12px 12px;
        overflow: hidden;
    }

    /* ocultar "Novedades reportadas" header en desktop (es visual de tarjetas) */
    #reports-view .reports-cards-header { display: none !important; }

    /* sin gap entre filas */
    #reports-view .reports-cards-list { display: flex; flex-direction: column; gap: 0; }

    /* cada tarjeta = fila de tabla */
    #reports-view .report-card {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #f8f5f2 !important;
        box-shadow: none !important;
        gap: 0 !important;
    }
    #reports-view .report-card:last-child { border-bottom: none !important; }
    #reports-view .report-card:hover { background: #fdfbf9; }

    /* ocultar partes mobile dentro de cada card */
    #reports-view .ri-accent-bar    { display: none !important; }
    #reports-view .ri-mobile-content { display: none !important; }

    /* desktop content = grid 9 columnas */
    #reports-view .report-desktop-content {
        display: grid !important;
        grid-template-columns: 1fr 110px 90px 100px 140px 130px 100px 130px;
        gap: 8px;
        padding: 10px 20px;
        align-items: center;
        min-height: 52px;
    }

    /* deshace wrappers intermedios — !important para ganar a reglas previas con !important */
    #reports-view .report-card-header  { display: contents !important; }
    #reports-view .report-card-heading { display: contents !important; }
    #reports-view .report-card-badges  { display: contents !important; }
    #reports-view .report-card-meta    { display: contents !important; }

    /* col 1: código — oculto en tabla desktop */
    #reports-view .report-card-kicker { display: none !important; }

    /* col 1→ actividad */
    #reports-view .report-card-info { min-width: 0; }
    #reports-view .report-card-info h4 {
        font-size: 13px;
        font-weight: 500;
        color: #35131a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }
    #reports-view .report-card-info p { display: none; }

    /* col 3: estado */
    #reports-view .report-card-status {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 20px;
        white-space: nowrap;
        width: fit-content;
    }
    /* col 4: prioridad */
    #reports-view .report-card-badge {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 20px;
        white-space: nowrap;
        width: fit-content;
    }
    /* cols 5-8: meta items — resetear estilo pastilla, mostrar como texto plano */
    #reports-view .report-card-meta-item {
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        color: #6b5a4c !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex-direction: row !important;
    }
    #reports-view .report-card-meta-item span {
        display: block !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
        color: #6b5a4c !important;
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    /* col 9: acciones */
    #reports-view .report-card-actions {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
    }
    #reports-view .report-card-actions-btn {
        width: 28px;
        height: 28px;
        padding: 0;
        min-height: 28px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #reports-view .report-card-actions-btn svg {
        width: 14px;
        height: 14px;
    }

    /* estado vacío */
    #reports-view .reports-empty-state {
        padding: 40px 20px;
        text-align: center;
        color: #a89686;
    }
}

/* ═══════════════════════════════════════════════════════
   MÓDULO NÓMINA QUINCENAL
   ═══════════════════════════════════════════════════════ */

.nomina-shell {
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Topbar (periodo + tabs) ──────────────────────────── */
.nomina-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 14px;
  padding: 12px 18px;
}
.nomina-period-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nomina-select {
  border: 1px solid #e0ddd8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: #fafaf9;
  color: #35131a;
  cursor: pointer;
}
.nomina-select:focus { outline: 2px solid #5c1a28; }

/* ── Tabs ─────────────────────────────────────────────── */
.nomina-tabs {
  display: flex;
  gap: 4px;
  background: #f8f5f2;
  border-radius: 10px;
  padding: 3px;
}
.nomina-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #8a7767;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nomina-tab:hover { background: #efe9e3; color: #35131a; }
.nomina-tab-active { background: #fff !important; color: #5c1a28 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* ── Tab panels ───────────────────────────────────────── */
.nomina-tab-panel { display: flex; flex-direction: column; gap: 14px; }
.nomina-tab-panel.hidden { display: none; }
.nomina-tab-panel-active { display: flex; }

/* ── Barra de acciones ────────────────────────────────── */
.nomina-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nomina-calc-btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-success {
  background: #15803d;
  color: #fff;
  border-color: #15803d;
}
.btn-success:hover { background: #166534; }

/* ── Panel de alertas inteligentes ───────────────────── */
.nomina-alertas-panel {
  background: #fff;
  border: 1.5px solid #fca5a5;
  border-radius: 12px;
  overflow: hidden;
}
.nomina-alertas-panel.hidden { display: none; }
.nomina-alertas-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fef2f2;
  border-bottom: 1px solid #fca5a5;
  font-size: 13px;
  font-weight: 700;
  color: #b91c1c;
  flex-wrap: wrap;
}
.nomina-alertas-badge {
  background: #ef4444;
  color: #fff;
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.nomina-alertas-filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

/* Botón toggle días sin registro */
.nomina-alertas-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1.5px solid #5c1a28;
  background: transparent;
  color: #73202f;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nomina-alertas-toggle:hover { background: #fdf8ec; }
.nomina-alertas-toggle-active {
  background: #5c1a28;
  color: #fff;
  border-color: #5c1a28;
}
.nomina-alertas-badge-sm {
  background: rgba(0,0,0,0.15);
  border-radius: 100px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
}

/* Lista con scroll fijo — máx 160px ≈ 3-4 empleados visibles */
.nomina-alertas-list {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #fca5a5 transparent;
}
.nomina-alertas-list::-webkit-scrollbar { width: 5px; }
.nomina-alertas-list::-webkit-scrollbar-thumb { background: #fca5a5; border-radius: 4px; }

.nomina-alertas-empty {
  font-size: 12px;
  color: #8a7767;
  padding: 4px 0;
  font-style: italic;
}
.nomina-alerta-emp-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.nomina-alerta-emp-name {
  font-size: 12px;
  font-weight: 700;
  color: #4a3c31;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 160px;
}
.nomina-alerta-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.nomina-alerta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--chip-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color) 35%, transparent);
  color: var(--chip-color);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
}
.nomina-alerta-chip em { font-style: normal; opacity: 0.75; font-weight: 400; }

/* ── Aviso informativo ────────────────────────────────── */
.nomina-info-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fdf8ec;
  border: 1px solid #e5bb5c;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: #5c1a28;
}
.nomina-info-alert.hidden { display: none; }

/* ── Tabla de liquidación ─────────────────────────────── */
.nomina-table-wrap {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}
.nomina-table-wrap.hidden { display: none; }
.nomina-table-header,
.nomina-row,
.nomina-totals-row {
  display: grid;
  grid-template-columns: 2fr 90px 72px 80px 84px 124px 114px 124px 72px;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  min-width: 820px;
}
.nomina-table-header {
  background: #f8f5f2;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a7767;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e8e4de;
}
.nomina-row {
  border-bottom: 1px solid #f8f5f2;
  font-size: 12.5px;
  color: #35131a;
  transition: background 0.12s;
}
.nomina-row:hover { background: #fdf8f9; }
.nomina-cell-name { min-width: 0; }
.nomina-emp-nombre { display: block; font-weight: 700; font-size: 13px; }
.nomina-emp-sub {
  display: block;
  font-size: 11px;
  color: #a89686;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.nomina-extras     { color: #5c1a28; font-weight: 600; }
.nomina-recargos   { color: #5b80c2; }
.nomina-cell-deducido { color: #dc2626; }
.nomina-cell-neto  { font-weight: 700; color: #15803d; }
.nomina-cell-acciones { display: flex; gap: 3px; align-items: center; }
.nomina-totals-row {
  background: #f8f7f4;
  font-weight: 700;
  font-size: 13px;
  border-top: 2px solid #e8e4de;
}

/* ── Tab empleados ────────────────────────────────────── */
.nomina-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 12px;
  padding: 14px 18px;
}
.nomina-section-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: #35131a;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.nomina-section-desc {
  font-size: 12px;
  color: #a89686;
  margin-top: 2px;
}
/* ── Constantes legales ───────────────────────────────── */
.nomina-constantes-card {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 12px;
  overflow: hidden;
}
.nomina-constantes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fdfbf9;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: #4a3c31;
  border-bottom: 1px solid #e8e4de;
}
.nomina-constantes-header:hover { background: #f1f5f9; }
.nomina-constantes-sub {
  font-size: 11px;
  font-weight: 400;
  color: #a89686;
  margin-left: 4px;
}
.nomina-constantes-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  font-size: 14px;
  color: #a89686;
}
.nomina-constantes-body {
  padding: 14px 16px;
}
.nomina-constantes-body.hidden { display: none; }
.nomina-constantes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.nomina-const-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5c1a28;
  margin-bottom: 6px;
}
.nomina-const-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed #f8f5f2;
  gap: 8px;
  color: #6b5a4c;
}
.nomina-const-row strong {
  font-weight: 700;
  color: #2c0c12;
  white-space: nowrap;
}

/* ── Tabla empleados estilo Excel ─────────────────────── */
.nomina-emp-table-wrap {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 12px;
  overflow: hidden;
  overflow-x: auto;
}
.nomina-emp-table-head {
  display: grid;
  grid-template-columns: 32px 2fr 110px 110px 130px 130px 120px 120px 110px 70px 44px;
  gap: 0;
  background: #f8f5f2;
  border-bottom: 2px solid #e8e4de;
  padding: 0 8px;
}
.nomina-emp-table-head > span {
  padding: 8px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a7767;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.nomina-emp-table-head > span em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: #5c1a28;
  font-size: 9.5px;
  letter-spacing: 0;
}
.nomina-emp-table-row {
  display: grid;
  grid-template-columns: 32px 2fr 110px 110px 130px 130px 120px 120px 110px 70px 44px;
  gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid #f8f5f2;
  align-items: center;
  transition: background 0.1s;
}
.nomina-emp-table-row:last-child { border-bottom: none; }
.nomina-emp-table-row:hover { background: #fdf8f9; }
.nomina-emp-row-pending { opacity: 0.6; }
.nomina-emp-table-row > span {
  padding: 9px 8px;
  font-size: 12px;
  color: #4a3c31;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nomina-emp-col-num  { text-align: right; font-variant-numeric: tabular-nums; }
.nomina-emp-col-name { font-weight: 600; color: #2c0c12; }
.nomina-emp-col-cc   { color: #8a7767; font-size: 11px; }
.nomina-emp-col-zona { color: #8a7767; font-size: 11px; }
.nomina-emp-col-marc { text-align: center; }
.nomina-emp-salario  { color: #15803d; font-weight: 700; }
.nomina-emp-derived  { color: #6b5a4c; background: #fdfbf9; }
.nomina-sin-salario  { color: #f87171; font-size: 11px; }

/* mantener compatibilidad con código viejo */
.nomina-emp-pending .nomina-emp-nombre { color: #a89686; }

/* ── Historial tab ────────────────────────────────────── */
.nomina-historial-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nomina-historial-card {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.nomina-historial-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.nomina-historial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0ece6;
  background: #fafaf9;
}
.nomina-historial-periodo {
  font-weight: 700;
  font-size: 13.5px;
  color: #35131a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nomina-historial-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-cerrado  { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.badge-borrador { background: #f5e6c0; color: #8a6512; border: 1px solid #e5bb5c; }
.nomina-historial-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: #4a3c31;
}
.nomina-historial-card-body span { display: flex; align-items: center; gap: 5px; }
.nomina-historial-neto { font-weight: 700; color: #15803d !important; font-size: 14px !important; }
.nomina-historial-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #f0ece6;
}
.nomina-historial-fecha { font-size: 11.5px; color: #a89686; }

/* ── Detalle historial en modal ─────────────────────────── */
.nomina-historial-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nomina-hist-detail-row {
  display: grid;
  grid-template-columns: 2fr 80px 120px 110px 120px;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  align-items: center;
  border-bottom: 1px solid #f8f5f2;
}
.nomina-hist-detail-row:nth-child(odd) { background: #fdfbf9; }
.nhd-neto { font-weight: 700; color: #15803d; }
.nhd-ded  { color: #dc2626; }
.nomina-modal-wide { max-width: 700px !important; }

/* ── Modales ──────────────────────────────────────────── */
.nomina-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 16px;
}
.nomina-modal.hidden { display: none; }
.nomina-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}
.nomina-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0ece6;
  border-top: 1px solid #5c1a28;
  border-radius: 14px 14px 0 0;
}
.nomina-modal-header h4 { font-size: 15px; font-weight: 700; }
.nomina-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nomina-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #f0ece6;
}
.nomina-field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nomina-field-row label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.nomina-field-row input,
.nomina-field-row textarea,
.nomina-field-row select {
  border: 1px solid #e0ddd8;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: #35131a;
  background: #fafaf9;
}
.nomina-field-row input:focus,
.nomina-field-row textarea:focus,
.nomina-field-row select:focus { outline: 2px solid #5c1a28; }
.nomina-field-check label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}
.nomina-label-note {
  font-size: 10px;
  font-weight: 400;
  color: #a89686;
  margin-left: 4px;
}

/* ── Preview de perfil en modal ───────────────────────── */
.nomina-perfil-preview {
  background: #f0f7ff;
  border: 1px solid #c8dff8;
  border-radius: 10px;
  padding: 10px 14px;
}
.nomina-perfil-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nomina-perfil-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e0eeff;
  border: 1px solid #c8dff8;
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 12px;
  color: #1a3a6b;
  font-weight: 600;
}
.nomina-perfil-chip i { font-size: 13px; color: #5b80c2; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1023px) {
  .nomina-topbar { flex-direction: column; align-items: stretch; }
  .nomina-tabs   { justify-content: center; }
  .nomina-table-header,
  .nomina-row,
  .nomina-totals-row {
    grid-template-columns: 1fr 72px 72px 100px 72px;
  }
  .nomina-table-header span:nth-child(3),
  .nomina-table-header span:nth-child(4),
  .nomina-table-header span:nth-child(5),
  .nomina-row .nomina-cell:nth-child(3),
  .nomina-row .nomina-cell:nth-child(4),
  .nomina-row .nomina-cell:nth-child(5) { display: none; }
  .nomina-hist-detail-row {
    grid-template-columns: 1fr 90px 90px;
  }
  .nhd-zona, .nhd-dev { display: none; }
}
@media (max-width: 600px) {
  .nomina-shell { padding: 8px; gap: 10px; }
  .nomina-tab { padding: 6px 10px; font-size: 12px; }
  .nomina-topbar { padding: 10px; }
  .nomina-actions-bar { gap: 6px; }
}

/* Asistente IA gerencia/admin */
.assistant-chat-fab {
  position: fixed;
  right: 18px;
  /* Base: apilado encima del FAB de diagnóstico (90px alto + 10px gap) */
  bottom: calc(154px + env(safe-area-inset-bottom));
  z-index: 160;
  min-width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #3f171f;
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28), 0 0 0 3px rgba(249, 115, 22, 0.18);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.assistant-chat-fab i {
  color: #9c4453;
  font-size: 23px;
}

.assistant-chat-fab:hover,
.assistant-chat-fab:focus-visible {
  background: #2c0c12;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.34), 0 0 0 4px rgba(249, 115, 22, 0.22);
  transform: translateY(-1px);
}

body.app-not-authenticated .assistant-chat-fab {
  display: none !important;
}

.assistant-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: end;
  padding: 1rem;
  pointer-events: none;
}

.assistant-chat-modal.visible {
  pointer-events: auto;
}

.assistant-chat-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.assistant-chat-modal.visible .assistant-chat-backdrop {
  opacity: 1;
}

.assistant-chat-panel {
  position: relative;
  width: min(430px, calc(100vw - 2rem));
  height: min(660px, calc(100dvh - 2rem));
  background: #ffffff;
  color: #35131a;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.assistant-chat-modal.visible .assistant-chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.assistant-chat-header {
  min-height: 70px;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #3f171f;
  color: #ffffff;
  border-bottom: 3px solid #5c1a28;
}

.assistant-chat-header h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.assistant-chat-header p {
  margin: 0.2rem 0 0;
  color: #e2d9d1;
  font-size: 0.78rem;
}

.assistant-chat-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.assistant-chat-close i {
  font-size: 20px;
}

.assistant-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #f8f5f2;
}

.assistant-chat-message {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 88%;
}

.assistant-chat-message.has-task-proposal {
  max-width: 96%;
}

.assistant-chat-message.is-user {
  align-self: flex-end;
  align-items: flex-end;
}

.assistant-chat-message.is-assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.assistant-chat-message-meta {
  color: #8a7767;
  font-size: 0.72rem;
  font-weight: 700;
}

.assistant-chat-bubble {
  border-radius: 8px;
  padding: 0.72rem 0.85rem;
  line-height: 1.45;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid #efe9e3;
  background: #ffffff;
  color: #3f171f;
}

.assistant-chat-message.is-user .assistant-chat-bubble {
  background: #5c1a28;
  border-color: #9c4453;
  color: #ffffff;
}

.assistant-chat-typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-width: 64px;
  min-height: 39px;
}

.assistant-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #a89686;
  animation: assistantTyping 0.9s infinite ease-in-out;
}

.assistant-chat-typing span:nth-child(2) {
  animation-delay: 0.12s;
}

.assistant-chat-typing span:nth-child(3) {
  animation-delay: 0.24s;
}

.assistant-chat-form {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  gap: 0.65rem;
  padding: 0.8rem;
  background: #ffffff;
  border-top: 1px solid #efe9e3;
}

.assistant-chat-form textarea {
  min-height: 46px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid #e2d9d1;
  border-radius: 8px;
  padding: 0.68rem 0.75rem;
  font: inherit;
  color: #3f171f;
  background: #ffffff;
}

.assistant-chat-form textarea:focus {
  outline: 2px solid rgba(249, 115, 22, 0.28);
  border-color: #5c1a28;
}

.assistant-chat-form button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5c1a28;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.16s ease, opacity 0.16s ease;
}

.assistant-chat-form button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.assistant-chat-form button:not(:disabled):hover {
  background: #9c4453;
}

.assistant-chat-form .assistant-chat-voice {
  background: #3f171f;
  color: #ffffff;
}

.assistant-chat-form .assistant-chat-voice:not(:disabled):hover,
.assistant-chat-form .assistant-chat-voice.is-listening {
  background: #73202f;
}

.assistant-chat-form .assistant-chat-voice.is-listening {
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

.assistant-chat-form .assistant-chat-photo-btn {
  background: #3f171f;
  color: #ffffff;
}

.assistant-chat-form .assistant-chat-photo-btn:not(:disabled):hover {
  background: #4a3c31;
}

.assistant-chat-form button i {
  font-size: 21px;
}

.assistant-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.assistant-task-actions button {
  min-height: 36px;
  border: 1px solid #e2d9d1;
  border-radius: 8px;
  padding: 0 0.75rem;
  background: #ffffff;
  color: #3f171f;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.assistant-task-actions button:first-child {
  background: #5c1a28;
  border-color: #9c4453;
  color: #ffffff;
}

.assistant-task-actions button:hover {
  border-color: #5c1a28;
}

/* Lista de tareas sin informe: botones apilados, todos con el mismo estilo */
.assistant-task-actions.assistant-task-actions-stack {
  flex-direction: column;
  align-items: stretch;
}

.assistant-task-actions.assistant-task-actions-stack button {
  text-align: left;
  white-space: normal;
}

.assistant-task-actions.assistant-task-actions-stack button:first-child {
  background: #ffffff;
  border-color: #e2d9d1;
  color: #3f171f;
}

.assistant-task-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 8px;
  padding: 0 0.7rem;
  background: #eef2ff;
  color: #4a3c31;
  font-size: 0.78rem;
  font-weight: 700;
}

.assistant-chat-status {
  min-height: 24px;
  margin: 0;
  padding: 0 0.9rem 0.75rem;
  color: #8a7767;
  font-size: 0.78rem;
}

.assistant-chat-status[data-type="error"] {
  color: #dc2626;
  font-weight: 700;
}

@keyframes assistantTyping {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@media (min-width: 1024px) {
  /* En desktop el sidebar tiene el botón — ocultar FAB flotante */
  .assistant-chat-fab {
    display: none !important;
  }

  .assistant-chat-modal {
    padding: 1.25rem;
  }

  /* Diagnóstico: mover a la izquierda en desktop para no invadir el contenido */
  .diag-fab {
    bottom: 24px;
    right: auto;
    left: calc(var(--sidebar-width, 260px) + 16px);
  }
}

@media (max-width: 600px) {
  .assistant-chat-fab {
    right: 14px;
    /* Sube 58px sobre el diagnóstico para que no se superpongan */
    bottom: calc(152px + env(safe-area-inset-bottom));
    height: 50px;
    padding: 0 13px;
  }

  .assistant-chat-panel {
    width: 100%;
    height: min(76dvh, 680px);
  }
}

/* ===== Marcador de ubicación usuario en mapa Ingreso ===== */
.mgm-user-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mgm-user-pin-ring {
    position: absolute;
    top: 0; left: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid;
    animation: mgm-pin-pulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes mgm-pin-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2);   opacity: 0; }
    100% { transform: scale(2);   opacity: 0; }
}

.mgm-user-pin-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.mgm-user-pin-initials {
    font-size: 7px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
}

.mgm-user-pin-label {
    margin-top: 2px;
    font-size: 7px;
    font-weight: 700;
    background: #fff;
    border: 1px solid;
    border-radius: 3px;
    padding: 0 3px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    line-height: 11px;
}

/* Selector de capas del mapa */
.mgm-tile-picker {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.mgm-tile-picker-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.mgm-tile-picker-menu {
    position: absolute;
    top: 38px;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    overflow: hidden;
    min-width: 100px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.mgm-tile-picker-menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: #4a3c31;
    border-left: 1px solid transparent;
}

.mgm-tile-picker-menu button:hover {
    background: #f8f5f2;
}

.mgm-tile-picker-menu button.active {
    color: #4a1420;
    border-left-color: #4a1420;
    background: #faf1f3;
}

/* ===== Task edit modal: altura ajustada al contenido ===== */
#task-modal .modal-content {
    height: auto !important;
    max-height: 90vh !important;
    min-height: unset !important;
}

.task-form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.task-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 700px) {
    .task-form-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .task-form-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .task-form-grid-4,
    .task-form-grid-3 { grid-template-columns: 1fr; }
}

/* ── Fotos de la Actividad ── */
.cot-fotos-actividad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
.cot-foto-slot {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px dashed #e2d9d1;
    background: #fdfbf9;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.cot-foto-slot:hover { border-color: #4a1420; background: #fdf8f9; }
.cot-foto-input { display: none; }
.cot-foto-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0.3rem;
    pointer-events: none;
}
.cot-foto-icon { font-size: 1.6rem; line-height: 1; }
.cot-foto-lbl { font-size: 0.72rem; color: #8a7767; font-weight: 500; }

/* ── Unificar filtros de módulo con el estilo de Tareas (planner-tf-btn) ── */
.reports-status-filter {
    padding: 0.28rem 0.75rem !important;
    border: 1px solid var(--border-color, #efe9e3) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--text-secondary, #666) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.reports-status-filter:hover {
    background: #faf1f3 !important; border-color: #4a1420 !important; color: #4a1420 !important;
}
.reports-status-filter.active {
    background: #4a1420 !important; border-color: #4a1420 !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(232,80,10,.2);
}
/* Ocultar columnas precio en tabla Materiales para tecnico */
#cot-mat-struct-table.cot-hide-price .cot-mat-price-th,
#cot-mat-struct-table.cot-hide-price .cot-mat-price-td { display: none; }

/* ── Equipment Index Inspection Form ──────────────────────── */
.ei-form-wrap {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.ei-form-header {
  padding: 12px 14px; background: #f7faf5; border-bottom: 1px solid #d4ddd0;
  flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.ei-form-header strong { display: block; font-size: .9rem; font-weight: 800; color: #1f2824; }
.ei-form-header small  { font-size: .75rem; color: #68736e; }
.ei-form-counters { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ei-form-counters span {
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
}
.ei-form-counters .no  { background: #fdecea; color: #8f2a22; }
.ei-form-counters .si  { background: #e6f4ee; color: #154534; }
.ei-form-counters .na  { background: #e4f0f7; color: #1e4266; }
.ei-form-counters .pend{ background: #f0f4ee; color: #68736e; }

.ei-form-body { flex: 1; overflow-y: auto; padding: 8px 10px 16px; scrollbar-width: thin; }
.ei-form-section { margin-bottom: 6px; border: 1px solid #d4ddd0; border-radius: 7px; overflow: hidden; }
.ei-form-sec-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: #f7faf5; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: #1f2824; text-align: left;
  gap: 8px; transition: background .14s;
}
.ei-form-sec-head:hover { background: #e6f4ee; }
.ei-form-sec-head span:last-child { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ei-form-no-badge { background: #fdecea; color: #8f2a22; padding: 2px 7px; border-radius: 999px; font-size: .65rem; font-weight: 900; }
.ei-form-sec-body { display: none; padding: 4px 8px 8px; }
.ei-form-sec-body.open { display: block; }

.ei-form-qrow { padding: 7px 5px; border-radius: 6px; margin-bottom: 3px; }
.ei-form-qrow:hover { background: #f7faf5; }
.ei-form-qrow-top { display: flex; align-items: flex-start; gap: 8px; }
.ei-form-qtxt { flex: 1; font-size: .78rem; line-height: 1.4; color: #3a4f3a; }

.ei-form-seg { display: flex; border: 1px solid #d4ddd0; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.ei-seg-btn {
  width: 34px; height: 26px; font-size: .68rem; font-weight: 800; border: none;
  border-right: 1px solid #d4ddd0; background: #fff; color: #68736e; cursor: pointer; transition: .12s;
}
.ei-seg-btn:last-child { border-right: none; }
.ei-seg-btn:hover:not(.s-si):not(.s-no):not(.s-na) { background: #f0f4ee; color: #1f2824; }
.ei-seg-btn.s-si { background: #286a53; color: #fff; border-color: #286a53; }
.ei-seg-btn.s-no { background: #b73a2d; color: #fff; border-color: #b73a2d; }
.ei-seg-btn.s-na { background: #2e6379; color: #fff; border-color: #2e6379; }

.ei-form-obs { display: none; margin-top: 6px; padding-left: 4px; }
.ei-form-obs.open { display: block; }
.ei-form-obs textarea {
  width: 100%; padding: 7px 9px; border: 1px solid #a87d1c; border-radius: 5px;
  background: #fdf8ec; font-family: inherit; font-size: .78rem; color: #1f2824;
  resize: vertical; min-height: 52px; outline: none;
}
.ei-form-obs textarea:focus { border-color: #8a6512; box-shadow: 0 0 0 3px rgba(183,122,32,.12); }

.ei-form-nota { margin-top: 12px; }
.ei-form-nota label { display: block; font-size: .7rem; font-weight: 800; color: #68736e; text-transform: uppercase; margin-bottom: 5px; }
.ei-form-nota textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d4ddd0; border-radius: 6px;
  font-family: inherit; font-size: .82rem; resize: vertical; outline: none;
}
.ei-form-nota textarea:focus { border-color: #286a53; box-shadow: 0 0 0 3px rgba(40,106,83,.12); }

.ei-form-footer {
  display: flex; gap: 7px; padding: 10px 14px;
  border-top: 1px solid #d4ddd0; background: #f7faf5; flex-shrink: 0;
}

.ei-hist-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #d4ddd0; cursor: pointer; transition: .12s;
}
.ei-hist-row:hover { background: #f0f4ee; }
.ei-hist-row strong { display: block; font-size: .85rem; font-weight: 700; }
.ei-hist-row small  { font-size: .75rem; color: #68736e; }

/* ============================================================
   APK phone viewport fixes
   Scoped to Capacitor/Android only through body.apk-native.
   The web desktop layout keeps its current visual treatment.
   ============================================================ */

body.apk-native {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #f8f5f2;
  /* Empujar contenido bajo la barra de estado del teléfono */
  padding-top: env(safe-area-inset-top, 0px);
}

body.apk-native * {
  max-width: 100%;
}

body.apk-native:not(.app-not-authenticated) #main-app {
  min-height: 100dvh;
  overflow-x: hidden;
  background: #f8f5f2;
}

body.apk-native:not(.app-not-authenticated) #main-content {
  min-width: 0;
  overflow-x: hidden;
  padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
  background: #f8f5f2 !important;
}

body.apk-native:not(.app-not-authenticated) .page-view,
body.apk-native:not(.app-not-authenticated) .reports-shell,
body.apk-native:not(.app-not-authenticated) .cotizaciones-list,
body.apk-native:not(.app-not-authenticated) .planner-layout {
  min-width: 0;
  width: 100%;
}

body.apk-native:not(.app-not-authenticated) #main-content > .section-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 8px !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 10px 14px 9px !important;
  margin: 0 -1px 12px !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #e8e6e1 !important;
  box-shadow: 0 2px 10px rgba(32, 27, 21, 0.06) !important;
  position: sticky !important;
  /* El header sticky debe pegarse justo DEBAJO del status bar del teléfono */
  top: env(safe-area-inset-top, 0px) !important;
  z-index: 80 !important;
}

body.apk-native:not(.app-not-authenticated) #main-content > .section-header .section-title-block {
  display: contents !important;
}

body.apk-native:not(.app-not-authenticated) #main-content > .section-header h2,
body.apk-native:not(.app-not-authenticated) #main-content > .section-header .section-title-block h2 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: #2c0c12 !important;
  font-size: clamp(1.12rem, 4vw, 1.45rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

body.apk-native:not(.app-not-authenticated) #main-content > .section-header .section-subtitle,
body.apk-native:not(.app-not-authenticated) #main-content > .section-header #header-user-role {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: #8a7767 !important;
  font-size: 0.78rem !important;
}

body.apk-native:not(.app-not-authenticated) #main-content > .section-header .header-actions {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
}

/* En APK los botones back y menu del header se ocultan — la navegacion
   se hace desde el bottom nav; el menu lateral se abre con swipe */
body.apk-native:not(.app-not-authenticated) #back-btn,
body.apk-native:not(.app-not-authenticated) #menu-btn {
  display: none !important;
}

body.apk-native:not(.app-not-authenticated) #notifications-btn,
body.apk-native:not(.app-not-authenticated) #topbar-add-task-btn:not(.hidden),
body.apk-native:not(.app-not-authenticated) #topbar-add-report-btn:not(.hidden) {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(232, 80, 10, 0.15) !important;
}

body.apk-native:not(.app-not-authenticated) #topbar-add-task-btn .topbar-btn-label,
body.apk-native:not(.app-not-authenticated) #topbar-add-report-btn .topbar-btn-label {
  display: none !important;
}

body.apk-native:not(.app-not-authenticated) #bottom-nav {
  left: 10px !important;
  right: 10px !important;
  /* El bottom respeta los botones nativos de Android. max() garantiza al menos
     14px aunque el dispositivo reporte inset 0 (algunos con barra de 3 botones). */
  bottom: max(14px, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  padding: 5px 8px !important;
  border-radius: 18px !important;
  z-index: 1500 !important;
  gap: 0 !important;
}

body.apk-native:not(.app-not-authenticated) #bottom-nav .nav-items-group {
  justify-content: space-around !important;
  gap: 0 !important;
  min-width: 0 !important;
}

body.apk-native:not(.app-not-authenticated) #bottom-nav .nav-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 7px 4px !important;
  border-radius: 12px !important;
  font-size: 0.66rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body.apk-native:not(.app-not-authenticated) #bottom-nav .nav-button i {
  font-size: 22px !important;
}

body.apk-native:not(.app-not-authenticated) .nav-date-badge,
body.apk-native:not(.app-not-authenticated) .nav-divider-line {
  display: none !important;
}

body.apk-native:not(.app-not-authenticated) #sidebar {
  width: min(78vw, 318px) !important;
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom)) !important;
  gap: 8px !important;
  background: #ffffff !important;
  border-right: 1px solid #f0ece6 !important;
}

body.apk-native:not(.app-not-authenticated) .sidebar-brand {
  padding: 10px 8px 12px !important;
}

body.apk-native:not(.app-not-authenticated) .sidebar-brand img,
body.apk-native:not(.app-not-authenticated) .brand-mark {
  width: 38px !important;
  height: 38px !important;
}

body.apk-native:not(.app-not-authenticated) .sidebar-user {
  padding: 10px !important;
}

body.apk-native:not(.app-not-authenticated) #sidebar nav,
body.apk-native:not(.app-not-authenticated) .sidebar-nav {
  gap: 3px !important;
  padding: 8px 0 !important;
}

body.apk-native:not(.app-not-authenticated) .nav-link {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 0.94rem !important;
}

body.apk-native:not(.app-not-authenticated) .nav-link .nav-icon {
  width: 24px !important;
  height: 24px !important;
}

@media (max-width: 900px) {
  body.apk-native:not(.app-not-authenticated) .card,
  body.apk-native:not(.app-not-authenticated) .profiles-section,
  body.apk-native:not(.app-not-authenticated) .planner-calendar-panel,
  body.apk-native:not(.app-not-authenticated) .planner-sidebar,
  body.apk-native:not(.app-not-authenticated) .cotizador-filters,
  body.apk-native:not(.app-not-authenticated) .reports-hero {
    border-radius: 16px !important;
    border: 1px solid #efe9e3 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 8px rgba(16, 24, 40, 0.05) !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .reports-hero {
    display: block !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .reports-status-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 0 0 4px !important;
    scrollbar-width: none !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .reports-status-filters::-webkit-scrollbar {
    display: none !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .reports-status-filter {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    font-size: 0.84rem !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-table-header {
    display: none !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view #reports-list,
  body.apk-native:not(.app-not-authenticated) #reports-view .reports-cards-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .reports-cards-header {
    display: flex !important;
    align-items: center !important;
    margin: 12px 0 10px !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .report-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    border: 1.5px solid rgba(232, 80, 10, 0.32) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06) !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .report-desktop-content {
    display: none !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .ri-mobile-content {
    display: block !important;
    padding: 18px !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .ri-accent-bar {
    display: block !important;
    height: 4px !important;
    background: #5b9bd5 !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .ri-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .ri-desc {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .ri-meta-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  body.apk-native:not(.app-not-authenticated) #reports-view .ri-footer {
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 18px 16px !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-filters {
    padding: 16px !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-filter-group {
    min-width: 0 !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-filter-group:last-of-type {
    grid-column: 1 / -1 !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-filter-row .btn,
  body.apk-native:not(.app-not-authenticated) #cot-filter-clear {
    width: 100% !important;
    min-height: 46px !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-estado-tabs {
    gap: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 12px 0 0 !important;
    scrollbar-width: none !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-estado-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body.apk-native:not(.app-not-authenticated) .cot-tab {
    flex: 0 0 auto !important;
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizacion-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizacion-card h4 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizacion-card p,
  body.apk-native:not(.app-not-authenticated) .cotizacion-card small {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizacion-total {
    justify-self: start !important;
    font-size: 1.18rem !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizacion-actions {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  body.apk-native:not(.app-not-authenticated) .modal-overlay {
    padding: 8px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  body.apk-native:not(.app-not-authenticated) .modal-content,
  body.apk-native:not(.app-not-authenticated) .report-modal-content,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .modal-content.cotizador-modal-content {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #2c0c12 !important;
  }

  body.apk-native:not(.app-not-authenticated) .modal-header,
  body.apk-native:not(.app-not-authenticated) .report-modal-header {
    padding: 18px 22px !important;
    background: #ffffff !important;
  }

  body.apk-native:not(.app-not-authenticated) .modal-body,
  body.apk-native:not(.app-not-authenticated) .report-builder-body,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .modal-body {
    padding: 16px !important;
    padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  body.apk-native:not(.app-not-authenticated) .modal-footer,
  body.apk-native:not(.app-not-authenticated) .report-modal-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #efe9e3 !important;
    box-shadow: 0 -12px 28px rgba(16, 24, 40, 0.12) !important;
    gap: 10px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .page-header {
    padding: 18px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    background: #ffffff !important;
    border: 1px solid #efe9e3 !important;
    color: #2c0c12 !important;
    align-items: flex-start !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .logo-text h1 {
    color: #2c0c12 !important;
    font-size: 1.05rem !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .logo-text p {
    color: #6b5a4c !important;
    font-size: 0.86rem !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .section,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .resumen-box {
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .section-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px 14px !important;
    padding: 16px 18px !important;
    background: #330e15 !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .section-head p {
    grid-column: 2 !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .section-head h2 {
    font-size: 0.98rem !important;
    line-height: 1.18 !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .section-body {
    padding: 18px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .fields-grid,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .logistica-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui input,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui select,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui textarea,
  body.apk-native:not(.app-not-authenticated) .report-builder-field input,
  body.apk-native:not(.app-not-authenticated) .report-builder-field select,
  body.apk-native:not(.app-not-authenticated) .report-builder-field textarea,
  body.apk-native:not(.app-not-authenticated) .form-group input,
  body.apk-native:not(.app-not-authenticated) .form-group select,
  body.apk-native:not(.app-not-authenticated) .form-group textarea {
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui textarea,
  body.apk-native:not(.app-not-authenticated) .report-builder-field textarea {
    min-height: 118px !important;
    line-height: 1.45 !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .materiales-table,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cot-mat-struct-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table table,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .materiales-table table {
    min-width: 560px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .logistica-info {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    font-size: 0.92rem !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .resumen-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .resumen-divider {
    display: none !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-footer-actions {
    flex-direction: row !important;
    align-items: center !important;
  }

  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-footer-actions .generate-btn {
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
  }

  body.apk-native:not(.app-not-authenticated) .report-builder-section,
  body.apk-native:not(.app-not-authenticated) .report-received-card {
    border-radius: 16px !important;
  }

  body.apk-native:not(.app-not-authenticated) .report-builder-grid,
  body.apk-native:not(.app-not-authenticated) .report-builder-grid-two,
  body.apk-native:not(.app-not-authenticated) .report-received-body,
  body.apk-native:not(.app-not-authenticated) .report-argos-autofill-grid,
  body.apk-native:not(.app-not-authenticated) .report-argos-receiver-grid,
  body.apk-native:not(.app-not-authenticated) .equipment-form-grid {
    grid-template-columns: 1fr !important;
  }

  body.apk-native:not(.app-not-authenticated) .report-progress-wrap {
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 0 16px 12px !important;
  }

  body.apk-native:not(.app-not-authenticated) .report-progress-step {
    flex: 0 0 94px !important;
  }

  body.apk-native:not(.app-not-authenticated) .planner-month-summary {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
  }

  body.apk-native:not(.app-not-authenticated) #planner-view .planner-calendar-panel {
    padding: 14px !important;
  }

  body.apk-native:not(.app-not-authenticated) #planner-view .planner-weekdays,
  body.apk-native:not(.app-not-authenticated) #planner-view .planner-grid {
    gap: 6px !important;
  }

  body.apk-native:not(.app-not-authenticated) #planner-view .planner-day {
    min-height: 58px !important;
    border-radius: 10px !important;
  }

  body.apk-native:not(.app-not-authenticated) #zonas-list,
  body.apk-native:not(.app-not-authenticated) .profiles-table-wrapper,
  body.apk-native:not(.app-not-authenticated) .table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.apk-native:not(.app-not-authenticated) #zonas-list table,
  body.apk-native:not(.app-not-authenticated) .profiles-table,
  body.apk-native:not(.app-not-authenticated) .data-table {
    min-width: 620px !important;
  }
}

@media (max-width: 430px) {
  body.apk-native:not(.app-not-authenticated) #main-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.apk-native:not(.app-not-authenticated) #main-content > .section-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.apk-native:not(.app-not-authenticated) #notifications-btn,
  body.apk-native:not(.app-not-authenticated) #back-btn,
  body.apk-native:not(.app-not-authenticated) #menu-btn,
  body.apk-native:not(.app-not-authenticated) #topbar-add-task-btn:not(.hidden),
  body.apk-native:not(.app-not-authenticated) #topbar-add-report-btn:not(.hidden) {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  body.apk-native:not(.app-not-authenticated) #bottom-nav .nav-button {
    font-size: 0.62rem !important;
  }

  body.apk-native:not(.app-not-authenticated) .cotizador-filter-row,
  body.apk-native:not(.app-not-authenticated) #reports-view .ri-meta-grid,
  body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .resumen-items {
    grid-template-columns: 1fr !important;
  }
}

body.apk-native.app-not-authenticated .global-loading-overlay {
  background: rgba(16, 24, 40, 0.38) !important;
  backdrop-filter: blur(10px) !important;
}

body.apk-native.app-not-authenticated .global-loading-box {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  color: #2c0c12 !important;
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.24) !important;
}

body.apk-native.app-not-authenticated #global-loading-text {
  color: #4a3c31 !important;
  font-weight: 700 !important;
}

/* v176 local APK cotizador polish: cantidades, buscador, footer y totales */
@media (max-width: 760px) {
  #cotizador-modal .cotizador-ui .services-search-wrap {
    position: relative !important;
  }

  #cotizador-modal .cotizador-ui .services-search-wrap input {
    padding-left: 48px !important;
    min-width: 0 !important;
    text-overflow: ellipsis !important;
  }

  #cotizador-modal .cotizador-ui .search-icon {
    left: 18px !important;
    width: 18px !important;
    z-index: 1 !important;
    line-height: 1 !important;
  }

  #cotizador-modal .cotizador-ui .services-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  #cotizador-modal .cotizador-ui .services-table th,
  #cotizador-modal .cotizador-ui .services-table td {
    padding: 7px 4px !important;
    font-size: 0.72rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #cotizador-modal .cotizador-ui .services-table .td-code {
    width: 48px !important;
    max-width: 48px !important;
    word-break: break-all !important;
  }

  #cotizador-modal .cotizador-ui .services-table .td-actividad {
    width: 84px !important;
    max-width: 84px !important;
  }

  #cotizador-modal .cotizador-ui .services-table .td-equipo {
    width: auto !important;
    max-width: 110px !important;
    color: #4a3c31 !important;
  }

  #cotizador-modal .cotizador-ui .services-table .td-cant {
    width: 76px !important;
    overflow: visible !important;
  }

  #cotizador-modal .cotizador-ui .services-table .td-cant input,
  #cotizador-modal .cotizador-ui .cotizador-actividad-cantidad {
    width: 66px !important;
    min-width: 66px !important;
    min-height: 46px !important;
    padding: 8px 6px !important;
    font-size: 1rem !important;
    text-align: center !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #cotizador-modal .cotizador-ui .services-table .cotizador-price-col {
    width: 76px !important;
    max-width: 76px !important;
    font-size: 0.68rem !important;
  }

  #cotizador-modal .cotizador-ui .services-table .td-del {
    width: 34px !important;
    max-width: 34px !important;
  }

  #cotizador-modal .cotizador-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  #cotizador-modal .cotizador-footer-actions .btn,
  #cotizador-modal .cotizador-footer-actions .generate-btn {
    min-height: 54px !important;
    max-height: 60px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: clamp(0.78rem, 3.25vw, 0.92rem) !important;
    line-height: 1.12 !important;
    width: 100% !important;
  }

  #cotizador-modal .cot-mat-total-row {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 0.82fr) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  #cotizador-modal .cot-mat-total-row .cot-mat-total-label {
    min-width: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
  }

  #cotizador-modal .cot-mat-total-row .cot-mat-total-label[style] {
    margin-left: 0 !important;
  }

  #cotizador-modal .cot-mat-total-row .cot-mat-total-val {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(0.98rem, 3.8vw, 1.2rem) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  #cotizador-modal #cot-mat-struct-total-val-monto {
    font-size: clamp(0.9rem, 3.25vw, 1.08rem) !important;
    letter-spacing: 0 !important;
  }
}

body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-search-wrap input {
  padding-left: 48px !important;
}

body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .search-icon {
  left: 18px !important;
  z-index: 1 !important;
}

body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table {
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  white-space: normal !important;
  overflow: visible !important;
}

body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-footer-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

body.apk-native:not(.app-not-authenticated) #cotizador-modal .cot-mat-total-row {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 0.82fr) minmax(0, 1fr) !important;
}

/* ── Panel de diagnóstico del técnico ─────────────────────────────────────── */
.diag-fab {
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 1050;
}
/* En escritorio sube para no chocar con el nav inferior */
@media (min-width: 900px) {
  .diag-fab { bottom: 24px; right: 24px; }
}
.diag-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2, #45141e);
  border: 1.5px solid var(--border-color, #4a3c31);
  color: var(--text-muted, #a89686);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.diag-fab:hover { background: var(--accent, #5c1a28); color: #fff; }
.diag-fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.diag-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-end; justify-content: center; }
.diag-modal.hidden { display: none; }
.diag-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.diag-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--surface-1, #2d0c13);
  border: 1px solid var(--border-color, #4a3c31);
  border-radius: 16px 16px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  max-height: 80vh; overflow-y: auto;
}
.diag-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color, #4a3c31);
}
.diag-header h3 { font-size: 15px; font-weight: 600; color: #f1f5f9; margin: 0; gap: 6px; display: flex; align-items: center; flex: 1; }
.diag-header-actions { display: flex; align-items: center; gap: 4px; }
.diag-action-btn { background: none; border: none; color: #a89686; cursor: pointer; font-size: 18px; padding: 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; line-height: 1; }
.diag-action-btn:hover { background: rgba(249,115,22,.15); color: #5c1a28; }
.diag-close { background: none; border: none; color: #a89686; cursor: pointer; font-size: 18px; padding: 4px; }
.diag-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.diag-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(30,41,59,.8);
  border: 1px solid rgba(51,65,85,.5);
}
.diag-row-label { font-size: 13px; color: #e2d9d1; display: flex; align-items: center; gap: 6px; }
.diag-row-value { font-size: 12px; font-weight: 600; color: #efe9e3; }
.diag-ok    { color: #4ade80; }
.diag-warn  { color: #d9a62e; }
.diag-error { color: #f87171; }
.diag-footer { padding: 10px 16px 14px; display: flex; gap: 8px; border-top: 1px solid var(--border-color, #4a3c31); }
.diag-footer .btn { flex: 1; }
/* FAB flotante para móvil/APK — visible solo cuando sidebar está oculto */
.diag-mobile-fab {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 1050;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2, #45141e);
  border: 1.5px solid var(--border-color, #4a3c31);
  color: #a89686;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.diag-mobile-fab:not(.hidden) { display: flex; }
.diag-mobile-fab:hover { background: var(--accent, #5c1a28); color: #fff; }
@media (max-width: 899px) {
  .diag-mobile-fab:not(.hidden) { display: flex; }
}
@media (min-width: 900px) {
  .diag-mobile-fab { display: none !important; }
}
@media (min-width: 600px) {
  .diag-modal { align-items: center; }
  .diag-panel { border-radius: 12px; max-height: 70vh; }
}

/* ── Dashboard widget: métricas de equipos eléctricos ─────────────────────── */
.db3-eq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.db3-eq-stat {
  background: var(--surface-2, #ebe9e3);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.db3-eq-num { font-size: 24px; font-weight: 700; color: var(--ink, #241c17); }
.db3-eq-lbl { font-size: 11px; color: var(--ink-soft, #56534c); text-align: center; }
.eq-critical .db3-eq-num { color: #c83c2e; }
.eq-high     .db3-eq-num { color: #a87d1c; }
.eq-ok       .db3-eq-num { color: #168a4a; }
.db3-eq-top  { font-size: 12px; color: var(--ink-soft, #56534c); margin: 4px 0 0; }
.db3-eq-top i { color: #a87d1c; }

/* ── Botones de navegación reemplazados por gestos ──────────────────────────── */
#back-btn,
#menu-btn,
#reportar-refresh-btn,
#dashboard-refresh-btn,
#facturacion-refresh-btn,
#nomina-refresh-perfiles-btn,
#profiles-refresh-btn,
#time-control-refresh-btn,
#equipment-back-btn,
#gestion-ot-refresh-btn,
#gestion-kpi-refresh-btn {
  display: none !important;
}

/* ── Nav Bottom Sheet ──────────────────────────────────────────────────────── */
#nav-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#nav-sheet-backdrop.visible {
  display: block;
  opacity: 1;
}

#nav-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1101;
  background: var(--surface, #fff);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

#nav-bottom-sheet.open {
  transform: translateY(0);
}

.nav-sheet-handle {
  width: 2.5rem;
  height: 4px;
  border-radius: 99px;
  background: var(--border-color, #dedbd2);
  margin: 0.75rem auto 0.5rem;
  flex-shrink: 0;
}

.nav-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  overflow-y: auto;
  flex: 1;
}

.nav-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.25rem;
  border-radius: 1rem;
  border: none;
  background: var(--surface-soft, #fbfaf7);
  color: var(--ink-soft, #56534c);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  min-height: 72px;
}

.nav-sheet-item:active {
  transform: scale(0.94);
}

.nav-sheet-item.active {
  background: rgba(255, 91, 31, 0.1);
  color: var(--brand-primary, #4a1420);
}

.nav-sheet-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.75rem;
  background: rgba(255, 91, 31, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--brand-primary, #4a1420);
}

.nav-sheet-item.active .nav-sheet-icon {
  background: rgba(255, 91, 31, 0.18);
}

.nav-sheet-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: inherit;
}

.nav-sheet-footer {
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-color, #dedbd2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-sheet-logout {
  flex: 1;
  padding: 0.85rem;
  border-radius: 0.85rem;
  border: 1.5px solid #ef4444;
  background: transparent;
  color: #ef4444;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-sheet-logout:active { background: rgba(239, 68, 68, 0.08); }

/* Botón diagnóstico en el footer del sheet */
.nav-sheet-diag {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 0.85rem;
  border: 1.5px solid var(--border-color, #dedbd2);
  background: transparent;
  color: var(--ink-soft, #9a9793);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-sheet-diag:active { background: rgba(249, 115, 22, 0.1); color: #5c1a28; border-color: #5c1a28; }

/* Pull-to-refresh indicator */
#ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-52px);
  z-index: 9999;
  background: var(--brand-primary, #4a1420);
  color: #fff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 14px rgba(255,91,31,0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.ptr-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-weight: 700;
  line-height: 1;
}

/* ===================================================================
   v171 — Sidebar tile grid redesign
   Replaces the vertical nav-link list with a 4-column icon tile grid.
   Scoped to authenticated state to avoid affecting the login screen.
   =================================================================== */

body:not(.app-not-authenticated) #sidebar nav,
body:not(.app-not-authenticated) .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 14px 10px 8px !important;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
}

/* "MÓDULOS" section header rendered as the first full-width grid row */
body:not(.app-not-authenticated) .sidebar-nav::before {
    content: "MÓDULOS";
    display: block;
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #b3aca2;
    text-transform: uppercase;
    padding: 0 2px 4px;
}

/* Tile button */
body:not(.app-not-authenticated) .nav-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    width: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

/* Icon box */
body:not(.app-not-authenticated) .nav-link .nav-icon {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #efe9e3 !important;
    border-radius: 14px !important;
    color: #8a7767 !important;
    font-size: 24px !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

body:not(.app-not-authenticated) .nav-link .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
}

body:not(.app-not-authenticated) .nav-link:hover .nav-icon {
    background: #faf1f3 !important;
    border-color: rgba(255,91,31,0.35) !important;
    color: #4a1420 !important;
}

/* Active tile */
body:not(.app-not-authenticated) .nav-link.active .nav-icon {
    background: #4a1420 !important;
    border-color: #4a1420 !important;
    color: #ffffff !important;
}

/* Label below icon box */
body:not(.app-not-authenticated) .nav-link .nav-label {
    font-size: 10px !important;
    color: var(--mgm-texto-apagado) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 58px !important;
    white-space: normal !important;
    flex: none !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

body:not(.app-not-authenticated) .nav-link.active .nav-label {
    color: #4a1420 !important;
    font-weight: 600 !important;
}

/* Logout button — red tint per design spec */
body:not(.app-not-authenticated) #logout-btn,
body:not(.app-not-authenticated) .logout-btn {
    background: #fcebeb !important;
    border: 0.5px solid #f09595 !important;
    color: #a32d2d !important;
    justify-content: center !important;
}

body:not(.app-not-authenticated) #logout-btn:hover,
body:not(.app-not-authenticated) .logout-btn:hover {
    background: #f9d4d4 !important;
    border-color: #e57373 !important;
    color: #7f1d1d !important;
    transform: none !important;
}

/* APK-specific tile tweaks (slightly smaller to fit narrow sidebar) */
body.apk-native:not(.app-not-authenticated) #sidebar nav,
body.apk-native:not(.app-not-authenticated) .sidebar-nav {
    padding: 12px 8px 6px !important;
    gap: 5px !important;
}

body.apk-native:not(.app-not-authenticated) .nav-link .nav-icon {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
}

body.apk-native:not(.app-not-authenticated) .nav-link .nav-label {
    font-size: 9px !important;
    max-width: 52px !important;
}

/* ===================================================================
   v172 — APK polish from phone validation
   Keeps desktop/web untouched; fixes Android WebView spacing/layers.
   =================================================================== */

body.apk-native:not(.app-not-authenticated) {
    padding-top: 0 !important;
}

body.apk-native:not(.app-not-authenticated) #main-content > .section-header {
    position: relative !important;
    top: auto !important;
    margin: calc(10px + env(safe-area-inset-top, 0px)) -1px 18px !important;
    z-index: 80 !important;
}

body.apk-native:not(.app-not-authenticated) #bottom-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1.5px solid rgba(255, 91, 31, 0.45) !important;
    border-top: 1.5px solid rgba(255, 91, 31, 0.45) !important;
    box-shadow:
        0 18px 38px rgba(232, 80, 10, 0.14),
        0 7px 20px rgba(16, 24, 40, 0.10) !important;
    overflow: visible !important;
}

body.apk-native.nav-sheet-open:not(.app-not-authenticated) #bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(110% + env(safe-area-inset-bottom, 0px))) !important;
}

body.apk-native:not(.app-not-authenticated) #nav-sheet-backdrop {
    z-index: 2500 !important;
}

body.apk-native:not(.app-not-authenticated) #nav-bottom-sheet {
    z-index: 2501 !important;
    max-height: min(82dvh, 620px) !important;
}

body.apk-native:not(.app-not-authenticated) #reportar-refresh-btn {
    display: none !important;
}

.leaflet-div-icon.equipment-index-map-pin,
.equipment-index-map-pin {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.equipment-index-map-pin .equipment-index-pin {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 12px 24px rgba(23, 34, 53, 0.30) !important;
}

.equipment-index-map-pin .equipment-index-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-right: 1px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

.equipment-index-map-pin .equipment-index-pin span {
    position: relative;
    z-index: 1;
    transform: none !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
}

.equipment-index-map-pin .equipment-index-tech-pin {
    background: #8a7767 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 12px 24px rgba(23, 34, 53, 0.26) !important;
}

.equipment-index-map-pin .equipment-index-tech-pin.active {
    background: #3b82f6 !important;
}

.assistant-chat-fab,
#assistant-chat-fab,
.btn-asistente-logo {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #b51f24 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 28px rgba(117, 23, 27, 0.28) !important;
    overflow: hidden !important;
}

.assistant-chat-fab:hover,
.assistant-chat-fab:focus-visible,
#assistant-chat-fab:hover,
#assistant-chat-fab:focus-visible,
.btn-asistente-logo:hover,
.btn-asistente-logo:focus-visible {
    background: #a9181d !important;
    box-shadow: 0 18px 32px rgba(117, 23, 27, 0.32) !important;
    transform: translateY(-1px);
}

#assistant-chat-fab img,
.btn-asistente-logo img {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body.apk-native:not(.app-not-authenticated) #assistant-chat-fab,
body.apk-native:not(.app-not-authenticated) .btn-asistente-logo {
    right: 18px;
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    z-index: 1700;
}

/* ===================================================================
   v173 — APK phone validation round 2
   =================================================================== */

#assistant-chat-fab,
.btn-asistente-logo {
    background: transparent !important;
    box-shadow: 0 14px 26px rgba(117, 23, 27, 0.24) !important;
}

#assistant-chat-fab:hover,
#assistant-chat-fab:focus-visible,
.btn-asistente-logo:hover,
.btn-asistente-logo:focus-visible {
    background: transparent !important;
    box-shadow: 0 16px 30px rgba(117, 23, 27, 0.28) !important;
}

#assistant-chat-fab img,
.btn-asistente-logo img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
}

.leaflet-div-icon.mgm-user-map-pin,
.mgm-user-map-pin {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mgm-user-map-pin .mgm-user-pin {
    width: 72px;
    min-height: 46px;
    align-items: center;
    justify-content: flex-start;
}

.mgm-user-map-pin .mgm-user-pin-ring {
    left: 50%;
    top: 1px;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border-width: 2px;
}

.mgm-user-map-pin .mgm-user-pin-dot {
    width: 28px;
    height: 28px;
    border-width: 2px;
}

.mgm-user-map-pin .mgm-user-pin-initials {
    font-size: 8px;
}

.mgm-user-map-pin .mgm-user-pin-label {
    margin-top: 3px;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    line-height: 13px;
    border-radius: 999px;
    padding: 0 6px;
}

/* ===================================================================
   v174 — APK map separation + assistant/menu polish
   =================================================================== */

@media (min-width: 901px) {
    body:not(.apk-native):not(.app-not-authenticated) #sidebar nav,
    body:not(.apk-native):not(.app-not-authenticated) .sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 14px 12px 10px !important;
    }

    body:not(.apk-native):not(.app-not-authenticated) .sidebar-nav::before {
        content: none !important;
        display: none !important;
    }

    body:not(.apk-native):not(.app-not-authenticated) .nav-link .nav-icon {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
        border-radius: 16px !important;
    }

    body:not(.apk-native):not(.app-not-authenticated) .nav-link .nav-label {
        max-width: 86px !important;
        font-size: 11px !important;
    }
}

.nav-assistant-logo {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
    background: #b51f24;
    box-shadow: inset 0 0 0 2px #b51f24;
}

.nav-assistant-logo img {
    width: 124%;
    height: 124%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    margin: -12%;
    clip-path: circle(50% at 50% 50%);
}

.nav-sheet-item .nav-assistant-logo {
    width: 44px;
    height: 44px;
}

#assistant-chat-fab,
.btn-asistente-logo {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    border: 3px solid #b51f24 !important;
    border-radius: 50% !important;
    background: #b51f24 !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;
    box-shadow: 0 16px 30px rgba(117, 23, 27, 0.30) !important;
}

#assistant-chat-fab:hover,
#assistant-chat-fab:focus-visible,
.btn-asistente-logo:hover,
.btn-asistente-logo:focus-visible {
    background: #a9181d !important;
    box-shadow: 0 18px 34px rgba(117, 23, 27, 0.34) !important;
}

#assistant-chat-fab img,
.btn-asistente-logo img {
    width: 124% !important;
    height: 124% !important;
    margin: -12% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

#assistant-fab-drop-target {
    position: fixed;
    left: 50%;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    width: 72px;
    height: 72px;
    transform: translate(-50%, 120%) scale(0.86);
    z-index: 1699;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.86);
    color: #ffffff;
    font-size: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.18s ease, background 0.16s ease;
}

#assistant-fab-drop-target.visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

#assistant-fab-drop-target.is-hot {
    background: #b51f24;
    box-shadow: 0 16px 34px rgba(117, 23, 27, 0.34);
}

.leaflet-div-icon.equipment-index-map-pin,
.equipment-index-map-pin {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.equipment-index-map-pin .equipment-index-pin,
.equipment-index-map-pin .equipment-index-tech-pin {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    border: 3px solid #ffffff !important;
    box-shadow:
        0 12px 24px rgba(23, 34, 53, 0.30),
        0 0 0 10px rgba(17, 24, 39, 0.10) !important;
}

.equipment-index-map-pin .equipment-index-pin::after {
    content: none !important;
    display: none !important;
}

.equipment-index-map-pin .equipment-index-pin span {
    transform: none !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* ===================================================================
   v175 — APK stable Leaflet markers + clean assistant bubble
   =================================================================== */

#assistant-chat-fab,
.btn-asistente-logo {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;
    box-shadow: 0 14px 26px rgba(117, 23, 27, 0.28) !important;
}

#assistant-chat-fab:hover,
#assistant-chat-fab:focus-visible,
.btn-asistente-logo:hover,
.btn-asistente-logo:focus-visible {
    background: transparent !important;
    box-shadow: 0 16px 30px rgba(117, 23, 27, 0.32) !important;
}

#assistant-chat-fab img,
.btn-asistente-logo img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.nav-assistant-logo,
.nav-assistant-logo img {
    background: transparent !important;
    box-shadow: none !important;
}

.leaflet-marker-icon.equipment-index-map-pin,
.leaflet-div-icon.equipment-index-map-pin,
.equipment-index-map-pin {
    width: 44px !important;
    height: 44px !important;
    margin-left: -22px !important;
    margin-top: -22px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.equipment-map-bubble {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    transform: none !important;
    rotate: 0deg !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    box-shadow:
        0 10px 22px rgba(23, 34, 53, 0.30),
        0 0 0 9px rgba(23, 34, 53, 0.12) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.equipment-map-bubble::before,
.equipment-map-bubble::after {
    content: none !important;
    display: none !important;
}

.equipment-map-bubble span {
    transform: none !important;
    rotate: 0deg !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
}

.equipment-map-bubble--critica { background: #dc4c42 !important; }
.equipment-map-bubble--alta { background: #d9a62e !important; }
.equipment-map-bubble--media { background: #39a6a2 !important; }
.equipment-map-bubble--sin_hallazgos { background: #2fbf71 !important; }
.equipment-tech-bubble.active { background: #3b82f6 !important; }
.equipment-tech-bubble.inactive { background: #8a7767 !important; }

.leaflet-marker-icon.mgm-user-map-pin,
.leaflet-div-icon.mgm-user-map-pin,
.mgm-user-map-pin {
    width: 108px !important;
    height: 42px !important;
    margin-left: -54px !important;
    margin-top: -24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mgm-user-location-pin {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 108px !important;
    min-height: 28px !important;
    padding: 2px 7px 2px 2px !important;
    border-radius: 999px !important;
    transform: none !important;
    rotate: 0deg !important;
    background: #ffffff !important;
    border: 1px solid rgba(232, 80, 10, 0.22) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18) !important;
    white-space: nowrap !important;
}

.mgm-user-location-dot {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 50% !important;
    background: var(--mgm-user-pin-color, #185fa5) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 2px rgba(24, 95, 165, 0.16) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.mgm-user-location-label {
    display: block !important;
    max-width: 66px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--mgm-user-pin-color, #185fa5) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 13px !important;
}

/* v177 local APK/mobile polish: cotizador legible, campana táctil e historial */
.time-history-filters {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.time-history-filter-row {
    display: grid;
    gap: 0.85rem;
}

.time-history-filter-row-dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.time-history-filter-row-tech {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
    .time-history-filter-row-dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .time-history-filter-row-dates .form-group,
    .time-history-filter-row-tech .form-group {
        min-width: 0;
    }

    #time-history-modal .modal-body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    body.apk-native:not(.app-not-authenticated) #notifications-btn,
    body.apk-native:not(.app-not-authenticated) #topbar-add-task-btn:not(.hidden),
    body.apk-native:not(.app-not-authenticated) #topbar-add-report-btn:not(.hidden) {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 15px !important;
        font-size: 1.08rem !important;
        margin-right: max(4px, env(safe-area-inset-right, 0px)) !important;
    }

    #cotizador-modal .cotizador-ui .services-table,
    body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        border-collapse: separate !important;
    }

    #cotizador-modal .cotizador-ui .services-table thead,
    body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table thead {
        display: none !important;
    }

    #cotizador-modal .cotizador-ui .services-table tbody,
    body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table tbody {
        display: grid !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row,
    body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(88px, 0.42fr) !important;
        gap: 8px 12px !important;
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    }

    #cotizador-modal .cotizador-ui .services-table td,
    body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table td {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-code,
    #cotizador-modal .cotizador-ui .services-table .td-actividad,
    #cotizador-modal .cotizador-ui .services-table .td-equipo {
        grid-column: 1 / -1 !important;
        padding-right: 42px !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-code {
        color: #4a1420 !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-actividad {
        color: #2c0c12 !important;
        font-size: 0.98rem !important;
        font-weight: 800 !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-equipo {
        color: #8a7767 !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-cant {
        grid-column: 1 / 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding-top: 6px !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-cant::before {
        content: "Cantidad";
        color: #8a7767;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    #cotizador-modal .cotizador-ui .services-table .td-cant input,
    #cotizador-modal .cotizador-ui .cotizador-actividad-cantidad {
        width: 76px !important;
        min-width: 76px !important;
        min-height: 48px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    #cotizador-modal .cotizador-ui .services-table .cotizador-price-col {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 6px 0 0 !important;
        color: #4a3c31 !important;
        font-size: 0.8rem !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-valor::before {
        content: "Valor unitario";
        color: #8a7767;
        font-weight: 800;
    }

    #cotizador-modal .cotizador-ui .services-table .td-total::before {
        content: "Total";
        color: #8a7767;
        font-weight: 800;
    }

    #cotizador-modal.reportar-tech-mode .services-table .cotizador-price-col {
        display: none !important;
    }

    #cotizador-modal .cotizador-ui .services-table .td-del {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
    }

    #cotizador-modal .cotizador-ui .services-table .empty-row {
        display: block !important;
        padding: 16px !important;
        border: 1px dashed rgba(15, 23, 42, 0.2) !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    #cotizador-modal .cotizador-footer-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    #cotizador-modal .cotizador-footer-actions .btn,
    #cotizador-modal .cotizador-footer-actions .generate-btn {
        min-height: 54px !important;
        max-height: 58px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
        font-size: clamp(0.78rem, 3.15vw, 0.92rem) !important;
        line-height: 1.08 !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    #cotizador-modal .cot-mat-total-row,
    body.apk-native:not(.app-not-authenticated) #cotizador-modal .cot-mat-total-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 5px 10px !important;
        align-items: center !important;
        padding: 10px 12px !important;
    }

    #cotizador-modal .cot-mat-total-row .cot-mat-total-label[style] {
        margin-left: 0 !important;
    }

    #cotizador-modal .cot-mat-total-row .cot-mat-total-label {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
    }

    #cotizador-modal .cot-mat-total-row .cot-mat-total-val {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        text-align: right !important;
        font-size: clamp(0.95rem, 3.6vw, 1.12rem) !important;
        line-height: 1.08 !important;
    }

    #cotizador-modal #cot-mat-struct-total-val-monto {
        font-size: clamp(0.88rem, 3.2vw, 1.04rem) !important;
        overflow-wrap: anywhere !important;
    }
}

/* ===================================================================
   v178 — Botones quitar (✕) en cotizador + mejoras APK
   =================================================================== */

/* ── Botón quitar servicio / material (global, tabla escritorio) ── */
.cotizador-remove-service-btn,
.cotizador-remove-material-btn,
.cot-mat-struct-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
}

.cotizador-remove-service-btn:hover,
.cotizador-remove-material-btn:hover,
.cot-mat-struct-del:hover {
    background: #fca5a5;
    color: #7f1d1d;
    transform: scale(1.1);
}

.cotizador-remove-service-btn:active,
.cotizador-remove-material-btn:active,
.cot-mat-struct-del:active {
    transform: scale(0.95);
}

/* ── En tarjeta móvil (td-del posicionado absolute) ── */
#cotizador-modal .cotizador-ui .services-table .td-del .cotizador-remove-service-btn {
    width: 100%;
    height: 100%;
    min-width: 34px;
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* ── Dashboard KPIs en APK: tamaño legible ── */
@media (max-width: 480px) {
    .db2-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .db2-kpi-value {
        font-size: 1.15rem !important;
    }

    .db2-kpi-label {
        font-size: 0.65rem !important;
    }
}

/* ── Reportar: form label táctil en móvil ── */
@media (max-width: 760px) {
    .reportar-form .form-group label,
    #reportar-view .form-group label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #4a3c31;
        margin-bottom: 5px;
        display: block;
    }

    .reportar-form .form-group select,
    .reportar-form .form-group input,
    .reportar-form .form-group textarea,
    #reportar-view .form-group select,
    #reportar-view .form-group input,
    #reportar-view .form-group textarea {
        min-height: 46px;
        border-radius: 12px;
        font-size: 0.92rem;
        padding: 10px 13px;
    }

    /* Botón de guardar reportar: ancho completo en móvil */
    #reportar-view .btn-primary,
    #reportar-view [type="submit"] {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 700;
    }
}

/* ── Tarea: botón crear/editar táctil en APK ── */
body.apk-native:not(.app-not-authenticated) .task-form .btn-primary,
body.apk-native:not(.app-not-authenticated) #task-modal .btn-primary {
    min-height: 54px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* ===================================================================
   v179 — Servicios cotizador: tabla real con scroll horizontal en móvil
   Reemplaza el layout de tarjetas (v177) por tabla scrollable compacta.
   Columnas visibles al centro: Actividad + Cant.
   Scroll izquierda: Código. Scroll derecha: Equipo, Valores, Total, ✕
   =================================================================== */
@media (max-width: 760px) {
    /* Restaurar tabla real */
    #cotizador-modal .cotizador-ui .services-table {
        display: table !important;
        min-width: 580px !important;
        width: max-content !important;
        border-collapse: collapse !important;
        overflow: visible !important;
    }
    #cotizador-modal .cotizador-ui .services-table thead {
        display: table-header-group !important;
    }
    #cotizador-modal .cotizador-ui .services-table thead th {
        background: #270a10 !important;
        color: #a89686 !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        padding: 6px 5px !important;
        white-space: nowrap !important;
    }
    #cotizador-modal .cotizador-ui .services-table tbody {
        display: table-row-group !important;
        gap: 0 !important;
    }
    #cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row {
        display: table-row !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        position: static !important;
    }
    #cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row:nth-child(even) {
        background: rgba(255,255,255,0.025) !important;
    }
    #cotizador-modal .cotizador-ui .services-table td {
        display: table-cell !important;
        padding: 7px 5px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        grid-column: unset !important;
    }
    /* Código */
    #cotizador-modal .cotizador-ui .services-table .td-code {
        min-width: 62px !important;
        max-width: 70px !important;
        color: #4a1420 !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
    }
    /* Actividad — columna principal, permite wrap */
    #cotizador-modal .cotizador-ui .services-table .td-actividad {
        min-width: 145px !important;
        max-width: 200px !important;
        color: #efe9e3 !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Cantidad — campo compacto, táctil */
    #cotizador-modal .cotizador-ui .services-table .td-cant {
        min-width: 72px !important;
        max-width: 80px !important;
        text-align: center !important;
        display: table-cell !important;
        flex: none !important;
        justify-content: unset !important;
        gap: 0 !important;
        padding-top: 7px !important;
    }
    #cotizador-modal .cotizador-ui .services-table .td-cant::before {
        content: none !important;
    }
    #cotizador-modal .cotizador-ui .services-table .td-cant input,
    #cotizador-modal .cotizador-ui .cotizador-actividad-cantidad {
        width: 58px !important;
        min-width: 58px !important;
        min-height: 38px !important;
        padding: 4px 6px !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        text-align: center !important;
    }
    /* Equipo */
    #cotizador-modal .cotizador-ui .services-table .td-equipo {
        min-width: 100px !important;
        max-width: 140px !important;
        color: #8a7767 !important;
        font-size: 0.75rem !important;
        grid-column: unset !important;
        padding-right: 0 !important;
    }
    /* Precios — celdas normales, no flex */
    #cotizador-modal .cotizador-ui .services-table .cotizador-price-col {
        display: table-cell !important;
        min-width: 82px !important;
        max-width: 100px !important;
        text-align: right !important;
        font-size: 0.8rem !important;
        flex: none !important;
        justify-content: unset !important;
        gap: 0 !important;
        padding: 7px 5px !important;
    }
    #cotizador-modal .cotizador-ui .services-table .td-valor::before { content: none !important; }
    #cotizador-modal .cotizador-ui .services-table .td-total::before { content: none !important; }
    /* Botón quitar: no posicionado absoluto */
    #cotizador-modal .cotizador-ui .services-table .td-del {
        position: static !important;
        width: 36px !important;
        min-width: 36px !important;
        height: auto !important;
        text-align: center !important;
        display: table-cell !important;
    }
    #cotizador-modal .cotizador-ui .services-table .td-del .cotizador-remove-service-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border-radius: 50% !important;
        font-size: 0.72rem !important;
    }
    /* Fila vacía restaurada */
    #cotizador-modal .cotizador-ui .services-table .empty-row {
        display: table-row !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        grid-template-columns: none !important;
    }
    #cotizador-modal .cotizador-ui .services-table .empty-row td {
        white-space: normal !important;
        padding: 20px !important;
        text-align: center !important;
        color: #6b5a4c !important;
        font-style: italic !important;
    }
}

/* ===================================================================
   v179 — Materiales estructurados: ocultar columna Item
   =================================================================== */
/* Item th existe en el header HTML pero su td fue eliminado del JS en v179.
   Solo ocultar el th — NO tocar td:first-child (es Descripción). */
#cot-mat-struct-table thead tr th:first-child {
    display: none !important;
}

/* Unidad: columna más estrecha por abreviación */
#cotizador-modal .cot-mat-struct-table th:nth-child(3),
#cotizador-modal .cot-mat-struct-table td:nth-child(3) {
    width: 60px !important;
}
#cotizador-modal .cot-mat-struct-table .cot-mat-struct-unidad {
    min-width: 56px !important;
    width: 56px !important;
    padding: 5px 4px !important;
    text-align: center !important;
}

/* ===================================================================
   v179 — Panel de notificaciones: más grande y legible en móvil
   =================================================================== */
@media (max-width: 640px) {
    .notifications-panel {
        position: fixed !important;
        top: 64px !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        width: auto !important;
        max-height: 62vh !important;
        z-index: 9900 !important;
        border-radius: 1.1rem !important;
        padding: 0.9rem !important;
    }
    .notification-item {
        padding: 0.75rem 0.85rem !important;
        gap: 0.35rem !important;
    }
    .notification-item strong {
        font-size: 0.88rem !important;
    }
    .notification-item span {
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
    }
}

/* ===================================================================
   v180 — Tabla servicios cotizador: fix definitivo APK + web móvil
   - Incluye body.apk-native para superar especificidad de la línea 18006
   - Actividad: texto negro #2c0c12, tamaño reducido a 0.80rem
   - 3 columnas visibles por defecto (Código ~60px, Actividad ~200px, Cant ~80px = ~340px)
   - Equipo, Valores, Total, ✕: visibles solo con scroll horizontal
   =================================================================== */
@media (max-width: 760px) {

/* 1. Tabla: display:table real, ancho fijo 640px, wrapper div ya tiene overflow-x:auto */
#cotizador-modal .cotizador-ui .services-table,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table {
    display: table !important;
    width: 640px !important;
    min-width: 640px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    overflow-x: visible !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* 2. Thead: visible con encabezados compactos */
#cotizador-modal .cotizador-ui .services-table thead,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table thead {
    display: table-header-group !important;
}
#cotizador-modal .cotizador-ui .services-table thead th,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table thead th {
    background: #270a10 !important;
    color: #a89686 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 5px !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* 3. Tbody: grupo normal */
#cotizador-modal .cotizador-ui .services-table tbody,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table tbody {
    display: table-row-group !important;
    gap: 0 !important;
}

/* 4. TR: fila real (cancela grid/card de v177) */
#cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row {
    display: table-row !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: auto !important;
}
#cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row:nth-child(even),
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table tr.cotizador-service-row:nth-child(even) {
    background: rgba(0,0,0,0.03) !important;
}

/* 5. TH / TD: celdas reales */
#cotizador-modal .cotizador-ui .services-table th,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table th,
#cotizador-modal .cotizador-ui .services-table td,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table td {
    display: table-cell !important;
    padding: 7px 5px !important;
    font-size: 0.72rem !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    grid-column: unset !important;
    flex: none !important;
    justify-content: unset !important;
    white-space: nowrap !important;
}

/* ─── Anchos de columna: suma = 640px ─── */

/* Código: 60px — visible por defecto */
#cotizador-modal .cotizador-ui .services-table .td-code,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-code {
    width: 60px !important;
    color: #4a1420 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    word-break: break-all !important;
    white-space: normal !important;
    overflow: visible !important;
    grid-column: unset !important;
    padding-right: 0 !important;
}

/* Actividad: 200px — TEXTO NEGRO, tamaño reducido — visible por defecto */
#cotizador-modal .cotizador-ui .services-table .td-actividad,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-actividad {
    width: 200px !important;
    color: #2c0c12 !important;
    font-size: 0.80rem !important;
    font-weight: 600 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    grid-column: unset !important;
    padding-right: 4px !important;
}

/* Cantidad: 80px — visible por defecto */
#cotizador-modal .cotizador-ui .services-table .td-cant,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-cant {
    width: 80px !important;
    text-align: center !important;
    overflow: visible !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
#cotizador-modal .cotizador-ui .services-table .td-cant::before,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-cant::before {
    content: none !important;
    display: none !important;
}
#cotizador-modal .cotizador-ui .services-table .td-cant input,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-cant input,
#cotizador-modal .cotizador-ui .cotizador-actividad-cantidad,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .cotizador-actividad-cantidad {
    width: 68px !important;
    min-width: 60px !important;
    min-height: 40px !important;
    padding: 5px 4px !important;
    border-radius: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* Equipo: 110px — solo con scroll */
#cotizador-modal .cotizador-ui .services-table .td-equipo,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-equipo {
    width: 110px !important;
    color: #4a3c31 !important;
    font-size: 0.72rem !important;
    grid-column: unset !important;
    padding-right: 0 !important;
}

/* Precio unitario y total: 78px c/u — solo con scroll */
#cotizador-modal .cotizador-ui .services-table .cotizador-price-col,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .cotizador-price-col {
    display: table-cell !important;
    width: 78px !important;
    text-align: right !important;
    font-size: 0.70rem !important;
    justify-content: unset !important;
    flex: none !important;
    padding-right: 5px !important;
}
#cotizador-modal .cotizador-ui .services-table .td-valor::before,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-valor::before,
#cotizador-modal .cotizador-ui .services-table .td-total::before,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-total::before {
    content: none !important;
    display: none !important;
}

/* Botón quitar: 34px — solo con scroll */
#cotizador-modal .cotizador-ui .services-table .td-del,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .td-del {
    width: 34px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Fila vacía restaurada como fila de tabla */
#cotizador-modal .cotizador-ui .services-table .empty-row,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .empty-row {
    display: table-row !important;
    position: static !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
}
#cotizador-modal .cotizador-ui .services-table .empty-row td,
body.apk-native:not(.app-not-authenticated) #cotizador-modal .cotizador-ui .services-table .empty-row td {
    white-space: normal !important;
    padding: 20px !important;
    text-align: center !important;
    color: #8a7767 !important;
    font-style: italic !important;
    overflow: visible !important;
    word-break: break-word !important;
}

}

/* ===================================================================
   v180b — Materiales estructurados: tabla scrollable en móvil y APK
   Columnas visibles por defecto: Descripción (165px) | Unidad (68px) | Cantidad (72px) ≈ 305px
   Columnas en scroll: V. Unitario (82px) | V. Total (82px) | ✕ (34px)
   =================================================================== */
@media (max-width: 760px) {

/* Tabla: ancho fijo, scroll via wrapper div */
#cot-mat-struct-table,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table {
    display: table !important;
    width: 503px !important;
    min-width: 503px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    overflow: visible !important;
}

/* Thead visible */
#cot-mat-struct-table thead,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table thead {
    display: table-header-group !important;
}
#cot-mat-struct-table thead th,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table thead th {
    padding: 6px 5px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    background: #270a10 !important;
    color: #a89686 !important;
}

/* Filas normales */
#cot-mat-struct-table tbody,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table tbody {
    display: table-row-group !important;
}
#cot-mat-struct-table tbody tr,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table tbody tr {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#cot-mat-struct-table tbody tr:nth-child(even),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.03) !important;
}
#cot-mat-struct-table td,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td {
    display: table-cell !important;
    padding: 6px 4px !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    overflow: hidden !important;
}

/* ─── Anchos de columnas (orden real en tbody, sin Item td) ─── */
/* 1: Descripción — 165px, visible por defecto */
#cot-mat-struct-table td:nth-child(1),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td:nth-child(1) {
    width: 165px !important;
    overflow: visible !important;
}
#cot-mat-struct-table .cot-mat-struct-desc,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table .cot-mat-struct-desc {
    width: 155px !important;
    min-width: 120px !important;
    font-size: 0.78rem !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
}
/* 2: Unidad — 68px, visible por defecto */
#cot-mat-struct-table td:nth-child(2),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td:nth-child(2) {
    width: 68px !important;
}
#cot-mat-struct-table .cot-mat-struct-unidad,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table .cot-mat-struct-unidad {
    width: 60px !important;
    min-width: 55px !important;
    font-size: 0.78rem !important;
    padding: 5px 3px !important;
    border-radius: 8px !important;
    text-align: center !important;
}
/* 3: Cantidad — 72px, visible por defecto */
#cot-mat-struct-table td:nth-child(3),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td:nth-child(3) {
    width: 72px !important;
}
#cot-mat-struct-table .cot-mat-struct-cant,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table .cot-mat-struct-cant {
    width: 60px !important;
    font-size: 0.82rem !important;
    padding: 5px 4px !important;
    border-radius: 8px !important;
    text-align: right !important;
}
/* 4: V. Unitario — 82px, solo scroll */
#cot-mat-struct-table td:nth-child(4),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td:nth-child(4) {
    width: 82px !important;
}
#cot-mat-struct-table .cot-mat-struct-vunit,
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table .cot-mat-struct-vunit {
    width: 72px !important;
    font-size: 0.82rem !important;
    padding: 5px 4px !important;
    border-radius: 8px !important;
    text-align: right !important;
}
/* 5: V. Total — 82px, solo scroll */
#cot-mat-struct-table td:nth-child(5),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td:nth-child(5) {
    width: 82px !important;
    text-align: right !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #15803d !important;
    overflow: visible !important;
    white-space: nowrap !important;
}
/* 6: Botón ✕ — 34px, solo scroll */
#cot-mat-struct-table td:nth-child(6),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table td:nth-child(6) {
    width: 34px !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Ancho de columnas en header (Item th es nth-child(1) pero display:none) */
#cot-mat-struct-table th:nth-child(2),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table th:nth-child(2) { width: 165px !important; }
#cot-mat-struct-table th:nth-child(3),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table th:nth-child(3) { width: 68px !important; }
#cot-mat-struct-table th:nth-child(4),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table th:nth-child(4) { width: 72px !important; }
#cot-mat-struct-table th:nth-child(5),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table th:nth-child(5) { width: 82px !important; }
#cot-mat-struct-table th:nth-child(6),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table th:nth-child(6) { width: 82px !important; }
#cot-mat-struct-table th:nth-child(7),
body.apk-native:not(.app-not-authenticated) #cot-mat-struct-table th:nth-child(7) { width: 34px !important; }

}

/* =========================================================
   SUPER ADMIN PANEL — v181
   ========================================================= */

#super-admin-view {
  padding: 1rem;
}

.sa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sa-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #efe9e3);
  border-radius: 10px;
  overflow: hidden;
}

.sa-card--full {
  grid-column: 1 / -1;
}

.sa-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #45141e;
  color: #f8fafc;
  font-size: 0.875rem;
  font-weight: 600;
}

.sa-card-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  flex: 1;
}

.sa-card-header i {
  font-size: 1rem;
  color: #4a1420;
}

.sa-refresh-btn {
  background: transparent;
  border: none;
  color: #a89686;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}

.sa-refresh-btn:hover { color: #f8fafc; background: rgba(255,255,255,0.1); }

.sa-badge {
  background: #4a1420;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

/* Tables */
.sa-table-wrap {
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sa-table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #6b5a4c;
  border-bottom: 1px solid #efe9e3;
  white-space: nowrap;
}

.sa-table tbody tr:nth-child(even) { background: #f8fafc; }
.sa-table tbody tr:hover { background: #e0f2fe; }

.sa-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #45141e;
  vertical-align: top;
}

.sa-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: #a89686;
  font-size: 0.82rem;
}

.sa-nombre {
  font-size: 0.80rem;
  font-weight: 600;
  color: #45141e;
  white-space: nowrap;
}

.sa-modulo-pill {
  background: #f1f5f9;
  color: #6b5a4c;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #efe9e3;
}

.sa-detail {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8a7767;
  font-size: 0.72rem;
}

.sa-action-pill {
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.sa-error-type {
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Module bars */
.sa-module-bars {
  padding: 0.75rem 1rem;
}

.sa-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 8px;
  font-size: 0.8rem;
}

.sa-bar-label {
  width: 80px;
  font-size: 0.75rem;
  color: #6b5a4c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-bar-track {
  flex: 1;
  background: #efe9e3;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.sa-bar-fill {
  height: 100%;
  background: #4a1420;
  border-radius: 4px;
  transition: transform 0.3s;
  min-width: 4px;
}

.sa-bar-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #45141e;
  width: 28px;
  text-align: right;
}

/* Performance */
.sa-perf-list {
  padding: 0.75rem 1rem;
}

.sa-perf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.sa-perf-row small {
  font-size: 0.68rem;
  color: #a89686;
  margin-left: 4px;
}

.sa-perf-ok  { background: #dcfce7; color: #166534; }
.sa-perf-mid { background: #f5e6c0; color: #8a6512; }
.sa-perf-slow { background: #fee2e2; color: #991b1b; }

/* Version info */
.sa-version-info {
  padding: 1rem;
}

.sa-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  font-size: 0.82rem;
  margin: 0;
}

.sa-dl dt {
  font-weight: 600;
  color: #6b5a4c;
}

.sa-dl dd {
  margin: 0;
  color: #45141e;
  font-family: monospace;
  font-size: 0.8rem;
}

/* Mobile: single column */
@media (max-width: 760px) {
  .sa-grid {
    grid-template-columns: 1fr;
  }
  .sa-card--full {
    grid-column: 1;
  }
}

/* =========================================================
   COSTOS LOGÍSTICOS INLINE EN FORMULARIO DE SEDE — v184
   ========================================================= */

.sede-costos-details {
  margin: 12px 0 0;
  border: 1px dashed #e2d9d1;
  border-radius: 8px;
  overflow: hidden;
}

.sede-costos-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  cursor: pointer;
  background: #f8fafc;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b5a4c;
  list-style: none;
  user-select: none;
}

.sede-costos-summary::-webkit-details-marker { display: none; }

.sede-costos-summary:hover {
  background: #f1f5f9;
  color: #45141e;
}

.sede-costos-details[open] .sede-costos-summary {
  background: #eff6ff;
  color: #1d4ed8;
  border-bottom: 1px dashed #bfdbfe;
}

.sede-costos-hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: #a89686;
  margin-left: 2px;
}

.sede-costos-grid {
  padding: 12px 14px 4px;
  background: #fff;
}

.sede-costos-note {
  padding: 0 14px 10px;
  font-size: 0.75rem;
  color: #a89686;
  background: #fff;
  margin: 0;
}

/* ── v208: Profile rows por rol ─────────────────────────────────── */
.profile-row-role { transition: background 0.15s; }
.profile-row-super_admin td:first-child { border-left: 1px solid #7c3aed; }
.profile-row-admin       td:first-child { border-left: 1px solid #0ea5e9; }
.profile-row-gerente     td:first-child { border-left: 1px solid #9c4453; }
.profile-row-supervisor  td:first-child { border-left: 1px solid #a87d1c; }
.profile-row-tecnico     td:first-child { border-left: 1px solid #16a34a; }
.profile-row-auxiliar    td:first-child { border-left: 1px solid #8a7767; }

.profile-avatar-super_admin { background: #7c3aed !important; color: #fff !important; }
.profile-avatar-admin       { background: #0ea5e9 !important; color: #fff !important; }
.profile-avatar-gerente     { background: #9c4453 !important; color: #fff !important; }
.profile-avatar-supervisor  { background: #a87d1c !important; color: #fff !important; }
.profile-avatar-tecnico     { background: #16a34a !important; color: #fff !important; }
.profile-avatar-auxiliar    { background: #8a7767 !important; color: #fff !important; }

@media (prefers-color-scheme: dark) {
  .profile-row-super_admin td:first-child { border-left-color: #a78bfa; }
  .profile-row-admin       td:first-child { border-left-color: #38bdf8; }
  .profile-row-gerente     td:first-child { border-left-color: #9c4453; }
  .profile-row-supervisor  td:first-child { border-left-color: #d9a62e; }
  .profile-row-tecnico     td:first-child { border-left-color: #4ade80; }
  .profile-row-auxiliar    td:first-child { border-left-color: #a89686; }
}

/* ===================================================================
   v215 — Pulido UI móvil (auditoría 2026-07-08)
   Bloque al final del archivo para ganar la cascada.
   =================================================================== */

@media (max-width: 768px) {

  /* ── 1. FAB asistente: más pequeño y se atenúa al hacer scroll ── */
  #assistant-chat-fab,
  .btn-asistente-logo {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    transition: opacity 0.25s ease, transform 0.16s ease !important;
  }
  body.mgm-scrolling #assistant-chat-fab,
  body.mgm-scrolling .btn-asistente-logo {
    opacity: 0.3;
    pointer-events: none;
  }

  /* ── 2. El contenido siempre libra el bottom-nav y el FAB ── */
  #main-content {
    padding-bottom: 140px !important;
    overflow-x: clip;
  }

  /* ── 3. Chips de filtro: carrusel horizontal, nunca montados ── */
  #reports-view .reports-status-filters,
  body:not(.app-not-authenticated) #reports-view .reports-status-filters,
  .reports-status-filters,
  .tasks-filters,
  .planner-tracking-filters,
  .equipment-index-layer-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 6px;
    width: 100% !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .reports-status-filters::-webkit-scrollbar,
  .tasks-filters::-webkit-scrollbar,
  .planner-tracking-filters::-webkit-scrollbar,
  .equipment-index-layer-tabs::-webkit-scrollbar {
    display: none;
  }
  #reports-view .reports-status-filter,
  body:not(.app-not-authenticated) #reports-view .reports-status-filter,
  .reports-status-filter,
  .planner-tf-btn,
  .equipment-index-layer-tabs button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .tasks-view-header {
    flex-wrap: wrap;
  }

  /* ── 4. Textos largos (nombre de archivo) truncados con … ── */
  .cotizacion-card small {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── 5. Header compacto: sin títulos duplicados en móvil ── */
  .reports-hero-copy { display: none !important; }
  .reports-hero {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 8px;
  }
  .reports-actions { width: 100%; }
  .reports-actions .btn { width: 100%; }
  .db3-topbar .db3-title { display: none !important; }
  .db3-topbar { flex-wrap: wrap; gap: 8px; }
  .leg-title { display: none !important; }
  #time-control-view .section-header h3 { display: none !important; }
  #gestion-view > .card > h3 { display: none !important; }
  .view-topbar-left h3 { display: none !important; }

  /* ── 6. Header superior: badge de notificaciones contenido ── */
  .notification-count:not(.hidden) {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    background: #4a1420 !important;
    color: #fff !important;
    border: 1.5px solid #fff !important;
    z-index: 3;
  }
  .header-actions { gap: 8px !important; }
  .header-actions .btn-icon { flex: 0 0 auto; }
  #reportar-historial-btn { overflow: visible !important; }
  .rpt-hist-badge {
    font-size: 10px !important;
    line-height: 16px !important;
    color: #fff !important;
    background: #73202f !important;
    top: -5px !important;
    right: -5px !important;
    z-index: 3;
    box-shadow: 0 0 0 1.5px #fff;
  }

  /* ── 7. KPIs del dashboard: labels legibles ── */
  .kpi-card > div { min-width: 0; }
  .db3-kpi-lbl { display: block; line-height: 1.25; }
}

@media (max-width: 480px) {
  /* Pestañas de Equipos compactas: las 3 caben sin cortarse */
  .equipment-index-layer-tabs { gap: 4px; padding: 3px; }
  .equipment-index-layer-tabs button {
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }
}

@media (max-width: 600px) {
  /* Pipeline comercial: rejilla 3+2 en vez de fila cortada */
  .db3-funnel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .db3-funnel-arrow { display: none !important; }
  .db3-funnel-step { min-width: 0; }
}

/* ============================================================
   v231 — Panel super_admin ampliado
   Salud del sistema, integridad, adopción, errores agrupados
   ============================================================ */

/* Semáforo compartido */
.sa-verde  { --sa-c: #16a34a; --sa-bg: #ecfdf5; --sa-bd: #a7f3d0; }
.sa-ambar  { --sa-c: #73202f; --sa-bg: #fdf8ec; --sa-bd: #e5bb5c; }
.sa-rojo   { --sa-c: #b91c1c; --sa-bg: #fef2f2; --sa-bd: #fca5a5; }

/* ── Salud del sistema ── */
.sa-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.sa-health-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sa-bg, #f8fafc);
    border: 1px solid var(--sa-bd, #efe9e3);
}

.sa-health-item > i {
    font-size: 22px;
    color: var(--sa-c, #6b5a4c);
    flex-shrink: 0;
}

.sa-health-txt { display: flex; flex-direction: column; min-width: 0; }

.sa-health-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a7767;
}

.sa-health-val {
    font-size: 17px;
    font-weight: 700;
    color: var(--sa-c, #45141e);
    line-height: 1.2;
}

.sa-health-txt small {
    font-size: 11px;
    color: #8a7767;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Integridad de datos ── */
.sa-chk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--sa-bd, #efe9e3);
    background: var(--sa-bg, #f8fafc);
    margin-bottom: 8px;
}

.sa-chk-ok  { --sa-c: #16a34a; --sa-bg: #f6fefa; --sa-bd: #d1fae5; }
.sa-chk-mal { --sa-c: #b91c1c; --sa-bg: #fef2f2; --sa-bd: #fca5a5; }

.sa-chk > i { font-size: 18px; color: var(--sa-c); flex-shrink: 0; }
.sa-chk-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sa-chk-txt span { font-size: 13px; color: #45141e; font-weight: 500; }
.sa-chk-txt small { font-size: 11px; color: #8a7767; }
.sa-chk > strong { font-size: 18px; font-weight: 700; color: var(--sa-c); }

/* ── Adopción de Ingreso ── */
.sa-adopt-top {
    padding: 12px;
    border-radius: 12px;
    background: var(--sa-bg, #f8fafc);
    border: 1px solid var(--sa-bd, #efe9e3);
    margin-bottom: 10px;
}

.sa-adopt-top strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--sa-c, #45141e);
}

.sa-adopt-top span { font-size: 12px; color: var(--mgm-texto-apagado); }
.sa-adopt-top .sa-bar-track { margin-top: 8px; }
.sa-adopt-top .sa-bar-fill { background: var(--sa-c, #8a7767); }

.sa-adopt-sub { font-size: 12px; color: var(--mgm-texto-apagado); margin: 6px 0; }

.sa-adopt-list summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #73202f;
    padding: 6px 0;
}

.sa-adopt-list ul {
    margin: 4px 0 0;
    padding-left: 18px;
    max-height: 160px;
    overflow-y: auto;
}

.sa-adopt-list li { font-size: 12px; color: #4a3c31; padding: 2px 0; }
.sa-adopt-list li small { color: #a89686; margin-left: 4px; }

/* ── Errores agrupados ── */
.sa-resolve-btn {
    border: 1px solid #e2d9d1;
    background: #fff;
    color: #6b5a4c;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sa-resolve-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #a89686; }
.sa-resolve-btn:disabled { opacity: 0.5; cursor: default; }

.sa-chip-ok {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #ecfdf5;
    color: #16a34a;
    border: 1px solid #a7f3d0;
}

.sa-err-resuelto { opacity: 0.55; }

/* ── Firma a distancia ───────────────────────────────────────────────────── */
/* Enlace de un solo uso para que el cliente firme desde otra planta.
   Ver docs/superpowers/specs/2026-08-30-firma-remota-design.md */

.report-signature-actions-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.report-firma-remota-estado {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-muted, #8a7767);
}
.report-firma-remota-estado[data-tono="ok"]   { background: rgba(34, 197, 94, 0.14);  color: #15803d; }
.report-firma-remota-estado[data-tono="warn"] { background: rgba(234, 179, 8, 0.16);  color: #8a6512; }
.report-firma-remota-estado[data-tono="info"] { background: rgba(255, 91, 31, 0.12);  color: #73202f; }

.firma-remota-modal { max-width: 460px; }

/* Las etiquetas heredaban --text-muted, que sobre el fondo claro del modal
   quedaba practicamente invisible. Aqui se fuerzan a un tono legible. */
.firma-remota-modal .report-builder-field span {
  color: #4a3c31;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.firma-remota-modal .report-builder-field input,
.firma-remota-modal .report-builder-field select {
  color: #241c17;
  background: #fff;
  border: 1px solid #e2d9d1;
}
.firma-remota-modal .report-builder-field input::placeholder { color: #a89686; }
.firma-remota-modal .report-builder-field { margin-bottom: 14px; }

.firma-remota-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted, #8a7767);
}

.firma-remota-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.firma-remota-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #15803d;
  margin-bottom: 14px;
}

.firma-remota-url-box { margin-bottom: 12px; }
.firma-remota-url-box input {
  width: 100%;
  padding: 11px 12px;
  font-size: 13px;
  font-family: var(--mgm-mono);
  border: 1px solid var(--border-color, #efe9e3);
  border-radius: 9px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-color, #2d0c13);
}

.firma-remota-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.firma-remota-acciones .btn { flex: 1 1 auto; }

.firma-remota-nota {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #8a7767);
}
.firma-remota-nota-aviso { color: #8a6512; font-weight: 600; }

@media (max-width: 480px) {
  .firma-remota-acciones .btn { flex: 1 1 100%; }
}

/* Botón de firma en la tarjeta del informe: solo aparece en informes sin firma
   del cliente, así que conviene que se distinga del resto de acciones. */
.report-card-actions-btn.report-firma-btn {
  color: #73202f;
  border-color: rgba(255, 91, 31, 0.35);
  background: rgba(255, 91, 31, 0.08);
}
.report-card-actions-btn.report-firma-btn:hover {
  background: rgba(255, 91, 31, 0.16);
  border-color: rgba(255, 91, 31, 0.55);
}

/* ===========================================================================
   MGM — CAPA DE ACABADO
   Va al final a proposito: gana la cascada sobre el CSS heredado sin tener
   que reescribirlo. Cubre lo que el navegador dibuja por defecto y que no
   pertenece a ningun sistema de diseño.
   =========================================================================== */

/* --- Superficies del navegador ------------------------------------------- */
::selection { background: var(--mgm-marca-200); color: var(--mgm-marca-900); }
:root { accent-color: var(--mgm-marca-700); }
input, textarea, select, [contenteditable] { caret-color: var(--mgm-marca-600); }

* { scrollbar-width: thin; scrollbar-color: var(--mgm-n-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mgm-n-300);
  border-radius: var(--mgm-r-full);
  border: 2px solid var(--mgm-fondo);
}
::-webkit-scrollbar-thumb:hover { background: var(--mgm-n-400); }

/* Foco visible y consistente. Solo por teclado, para no ensuciar el toque. */
:focus-visible {
  outline: none;
  box-shadow: var(--mgm-foco);
  border-radius: var(--mgm-r-sm);
}

/* Cifras alineadas en columna: OT, dinero, horas, contadores. */
table, .data-table, .kpi-card, .db3-panel,
[class*="valor"], [class*="total"], [class*="count"], [class*="kpi"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Punto de estado: sustituye a los emoji 🔴 🟡 ------------------------- */
.mgm-punto {
  display: inline-block;
  inline-size: .5rem; block-size: .5rem;
  border-radius: var(--mgm-r-full);
  margin-inline-end: .4rem;
  vertical-align: baseline;
  flex: none;
}
.mgm-punto--riesgo { background: var(--mgm-riesgo); }
.mgm-punto--aviso  { background: var(--mgm-oro-600); }
.mgm-punto--exito  { background: var(--mgm-exito); }

/* --- Densidad: es una herramienta de campo, no una landing ---------------- */
/* Estados vacios: el brief prohibe "tarjetas enormes sin informacion".
   Se compactan en vez de reservar media pantalla en blanco. */
.empty-state, .no-data, [class*="empty"], [class*="sin-datos"] {
  padding-block: 1.75rem;
  color: var(--mgm-texto-apagado);
  font-size: .9rem;
}

/* Iconos de navegacion: heredaban gris frio, ahora llevan la marca. */
#sidebar nav .ti { color: var(--mgm-marca-500); }
#sidebar nav .active .ti, #sidebar nav [aria-current="page"] .ti { color: inherit; }

/* --- Objetivos tactiles: se usa con guantes ------------------------------- */
@media (pointer: coarse) {
  button, .btn, a.btn, [role="button"], .nav-item, .chip, .tab {
    min-block-size: 44px;
  }
}

/* --- Movimiento: coherente e interrumpible -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Correcciones de la ronda de inspección ------------------------------- */

/* El craft floor prohibe barras de color laterales de mas de 1px en tarjetas,
   filas y avisos: es un disfraz, no un sistema de jerarquia. El rol pasa a un
   punto, que ademas no depende solo del color para distinguirse. */
.profile-row-super_admin td:first-child,
.profile-row-admin       td:first-child,
.profile-row-gerente     td:first-child,
.profile-row-supervisor  td:first-child,
.profile-row-tecnico     td:first-child,
.profile-row-auxiliar    td:first-child {
  border-left: 0;
  position: relative;
  padding-left: 1.35rem;
}
.profile-row-super_admin td:first-child::before,
.profile-row-admin       td:first-child::before,
.profile-row-gerente     td:first-child::before,
.profile-row-supervisor  td:first-child::before,
.profile-row-tecnico     td:first-child::before,
.profile-row-auxiliar    td:first-child::before {
  content: "";
  position: absolute;
  left: .5rem; top: 50%;
  inline-size: .45rem; block-size: .45rem;
  border-radius: var(--mgm-r-full);
  transform: translateY(-50%);
}
/* Morado #7c3aed y cian #0ea5e9 quedaban fuera de la marca; entran en la escala. */
.profile-row-super_admin td:first-child::before { background: var(--mgm-marca-700); }
.profile-row-admin       td:first-child::before { background: var(--mgm-marca-500); }
.profile-row-gerente     td:first-child::before { background: var(--mgm-marca-400); }
.profile-row-supervisor  td:first-child::before { background: var(--mgm-oro-600); }
.profile-row-tecnico     td:first-child::before { background: var(--mgm-exito); }
.profile-row-auxiliar    td:first-child::before { background: var(--mgm-n-400); }

/* Paneles de grafica sin datos: reservaban ~200px de vacio. El brief prohibe
   expresamente "tarjetas enormes sin informacion". */
.db3-panel { min-height: 0; }
.db3-panel:has(.db3-empty, .no-data, [class*="sin-dato"]) { min-height: 0; }
.db3-empty, .db3-panel .no-data {
  padding-block: 1.25rem;
  font-size: .85rem;
  color: var(--mgm-texto-apagado);
}

/* Etapa ganadora del embudo: peso tipografico, no solo color. */
.db3-funnel-step:last-child strong { font-weight: 700; }
.db3-funnel-arrow { color: var(--mgm-n-400); }

/* Movil: el nav inferior es fijo y tapaba el final del contenido. */
@media (max-width: 900px) {
  /* El nav inferior es fijo: sin este colchon tapa el final de cada vista.
     Se aplica al contenedor de contenido, no a una clase concreta, porque
     no todas las vistas usan el mismo envoltorio. */
  #main-content,
  #main-app .view-container,
  #main-app .db3-container {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* La insignia de meta era un pill azul suelto con float; entra en la escala
   de marca y se ancla con el flujo, no flotando. */
.section-label { display: flex; align-items: center; gap: .4rem; }
.mgm-pill-meta {
  margin-left: auto;
  background: var(--mgm-oro-100);
  color: var(--mgm-oro-700);
  border: 1px solid var(--mgm-oro-300);
  border-radius: var(--mgm-r-full);
  padding: .1rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

/* El donut reservaba alto fijo aunque no hubiera datos. */
.db3-donut-wrap:empty { display: none; }
.db3-donut-wrap canvas { max-block-size: 100px; }

/* --- Contraste medido en el DOM renderizado ------------------------------
   Una captura no delata esto; la medicion si. Tres reglas incumplian WCAG AA:
     .brand-sub / .user-role  #999999  -> 2.85:1 y 2.73:1
     .nav-label               #8a7767  -> 4.27:1  (el neutro-500 nunca fue
                                          apto para texto de cuerpo)
   Suben a neutro-600 (6.58:1 sobre blanco), el escalon mas claro que si pasa. */
/* El contraste quedo corregido en las reglas de origen, no aqui. */

/* ===========================================================================
   PANTALLA MÓVIL — barra de acción fija + lista del día
   Estructura elegida por el dueño (seed 51bd624e).
   Tesis: lo urgente no se busca. MARCAR y REPORTAR pesan mas que el resto
   del menu, en vez de ser dos iconos identicos a "Gestion".
   =========================================================================== */
@media (max-width: 900px) {

  #bottom-nav {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    background: var(--mgm-superficie);
    border-top: 1px solid var(--mgm-borde);
    box-shadow: 0 -2px 4px rgba(36,28,23,.05), 0 -8px 20px rgba(36,28,23,.05);
  }

  /* Todo el menu baja de peso para que la accion pueda subir. */
  #bottom-nav .nav-button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-block-size: 52px;
    padding: .3rem .1rem;
    border: 0;
    border-radius: var(--mgm-r-md);
    background: transparent;
    color: var(--mgm-texto-apagado);
    font-size: .625rem;
    font-weight: 500;
    line-height: 1.1;
    cursor: pointer;
    transition: background .18s cubic-bezier(.22,1,.36,1), color .18s;
  }
  #bottom-nav .nav-button .ti,
  #bottom-nav .nav-button svg { font-size: 1.25rem; inline-size: 1.25rem; block-size: 1.25rem; }
  #bottom-nav .nav-button.active { color: var(--mgm-marca-700); background: var(--mgm-marca-50); }
  #bottom-nav .nav-button:active { background: var(--mgm-n-100); }

  /* Todos los destinos de la barra pesan igual. Antes "Ingreso" iba en
     vinotinto y "Reportar" en dorado, promovidos a dominantes; el dueno pidio
     quitar ese resaltado (2026-09-05). El unico realce que queda es el de la
     vista activa, que es informacion, no jerarquia. El objetivo tactil de
     44 px se conserva desde .nav-button. */

  /* "Salir" no compite con nada: es el elemento mas callado de la barra. */
  #bottom-nav .nav-button-logout { flex: .7 1 0; color: var(--mgm-n-500); }

  /* --- Franja de estado de jornada --- */
  .mgm-turno {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .85rem;
    padding: .7rem .85rem;
    border-radius: var(--mgm-r-lg);
    background: var(--mgm-n-100);
    border: 1px solid var(--mgm-borde);
    box-shadow: var(--mgm-sombra-1);
  }
  .mgm-turno[data-estado="dentro"] {
    background: var(--mgm-exito-bg);
    border-color: #bfe0d3;
  }
  .mgm-turno[data-estado="fuera"] {
    background: var(--mgm-oro-100);
    border-color: var(--mgm-oro-300);
  }
  .mgm-turno-punto {
    inline-size: .6rem; block-size: .6rem; flex: none;
    border-radius: var(--mgm-r-full);
    background: var(--mgm-n-400);
  }
  .mgm-turno[data-estado="dentro"] .mgm-turno-punto { background: var(--mgm-exito); }
  .mgm-turno[data-estado="fuera"]  .mgm-turno-punto { background: var(--mgm-oro-600); }
  .mgm-turno-texto { min-width: 0; flex: 1; }
  .mgm-turno-titulo {
    font-size: var(--mgm-t-sm);
    font-weight: 600;
    color: var(--mgm-texto);
    line-height: 1.25;
  }
  .mgm-turno-sub {
    font-size: var(--mgm-t-xs);
    color: var(--mgm-texto-apagado);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mgm-turno-hora {
    font-family: var(--mgm-mono);
    font-size: var(--mgm-t-sm);
    font-weight: 500;
    color: var(--mgm-texto-2);
    flex: none;
  }
}

/* La primera tarjeta de HOY es el trabajo en curso: se agranda y muestra sus
   acciones. Las siguientes quedan compactas. Es la jerarquia que pedia la
   estructura elegida, sin tocar el render de tareas. */
@media (max-width: 900px) {
  #tasks-list > *:first-child {
    box-shadow: var(--mgm-sombra-2);
    border-color: var(--mgm-marca-200);
    border-left: 1px solid var(--mgm-marca-400);
  }
  #tasks-list > *:first-child .task-title,
  #tasks-list > *:first-child h4,
  #tasks-list > *:first-child strong:first-of-type {
    font-size: var(--mgm-t-md);
    line-height: 1.25;
  }
  #tasks-list > * + * { opacity: .94; }

  /* Los filtros se vuelven una fila deslizable en vez de apilarse. */
  .tasks-filters {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .tasks-filters::-webkit-scrollbar { display: none; }
  .tasks-filters .planner-tf-btn { flex: none; min-block-size: 40px; }

  /* La cabecera de la vista deja de repetir el titulo de la barra superior. */
  .tasks-view-header h3 { font-size: var(--mgm-t-md); }
}

/* Acciones de la tarjeta: eran circulos de 32px con colores arbitrarios
   (verde/azul/gris/rojo). Con guantes no se aciertan. Pasan a objetivos de
   44px, mismo peso, y el color solo marca lo destructivo. */
@media (max-width: 900px) {
  #tasks-list .task-actions,
  #tasks-list [class*="acciones"] { gap: .4rem; }
  #tasks-list button[class*="icon"],
  #tasks-list .btn-icon,
  #tasks-list a[class*="icon"] {
    min-inline-size: 44px;
    min-block-size: 44px;
    border-radius: var(--mgm-r-md);
    border: 1px solid var(--mgm-borde);
    background: var(--mgm-superficie);
    color: var(--mgm-texto-2);
  }
  #tasks-list button[class*="danger"],
  #tasks-list button[class*="delete"],
  #tasks-list button[class*="eliminar"] {
    color: var(--mgm-riesgo);
    border-color: #eccbc7;
  }
  /* Etiquetas de la barra: sin partirse en dos lineas. */
  #bottom-nav .nav-button span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
  }
}

/* Medido en el DOM: los botones de accion de la tarjeta salian a 30x44 y
   30x30. Con guantes eso no se acierta; el minimo tactil es 44x44. */
@media (max-width: 900px) {
  #tasks-list .ta-action-btn,
  #tasks-list .ri-btn,
  #tasks-list .btn-action-icon,
  #tasks-list .task-exec-btn {
    min-inline-size: 44px;
    min-block-size: 44px;
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mgm-r-md);
    border: 1px solid var(--mgm-borde);
    background: var(--mgm-superficie);
    color: var(--mgm-texto-2);
    box-shadow: none;
  }
  /* El color se reserva para lo que importa: ejecutar y borrar. */
  #tasks-list .ta-btn-play {
    background: var(--mgm-marca-700);
    border-color: var(--mgm-marca-700);
    color: #fff;
  }
  #tasks-list .btn-action-icon.danger,
  #tasks-list .ta-btn-del { color: var(--mgm-riesgo); border-color: #eccbc7; }
}

/* ===========================================================================
   COTIZADOR EN TELÉFONO — devolverle la pantalla a las tarjetas
   Los tres selectores mas los siete estados ocupaban ~340px antes de que
   apareciera una sola cotizacion. Ahora: una barra de 44px y una fila de
   estados deslizable.
   =========================================================================== */
.mgm-filtro-toggle { display: none; }

@media (max-width: 900px) {
  .mgm-filtro-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-block-size: 44px;
    padding: 0 .85rem;
    margin-bottom: .6rem;
    border: 1px solid var(--mgm-borde);
    border-radius: var(--mgm-r-full);
    background: var(--mgm-superficie);
    color: var(--mgm-texto-2);
    font-size: var(--mgm-t-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--mgm-sombra-1);
    transition: background .18s cubic-bezier(.22,1,.36,1);
  }
  .mgm-filtro-toggle:active { background: var(--mgm-n-100); }
  .mgm-filtro-toggle[aria-expanded="true"] {
    background: var(--mgm-marca-50);
    border-color: var(--mgm-marca-200);
    color: var(--mgm-marca-700);
  }
  .mgm-filtro-chevron { transition: transform .2s cubic-bezier(.22,1,.36,1); }
  .mgm-filtro-toggle[aria-expanded="true"] .mgm-filtro-chevron { transform: rotate(180deg); }
  .mgm-filtro-count {
    min-inline-size: 1.25rem;
    padding: 0 .3rem;
    border-radius: var(--mgm-r-full);
    background: var(--mgm-marca-700);
    color: #fff;
    font-family: var(--mgm-mono);
    font-size: .6875rem;
    line-height: 1.25rem;
    text-align: center;
  }

  /* Los selectores se pliegan. Sin animar height: se anima el propio panel. */
  #cotizador-filters .cotizador-filter-row {
    display: none;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .7rem;
    padding: .85rem;
    border: 1px solid var(--mgm-borde);
    border-radius: var(--mgm-r-lg);
    background: var(--mgm-superficie);
    box-shadow: var(--mgm-sombra-1);
  }
  #cotizador-filters.filtros-abiertos .cotizador-filter-row { display: flex; }
  #cotizador-filters .cotizador-filter-group { width: 100%; }
  #cotizador-filters .cotizador-filter-group select { width: 100%; min-block-size: 44px; }
  #cotizador-filters #cot-filter-clear { min-block-size: 44px; width: 100%; }

  /* Los siete estados: una sola fila que se desliza, no tres que se apilan. */
  .cotizador-estado-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .2rem;
    margin-bottom: .2rem;
  }
  .cotizador-estado-tabs::-webkit-scrollbar { display: none; }
  .cotizador-estado-tabs .cot-tab {
    flex: none;
    scroll-snap-align: start;
    min-block-size: 40px;
    padding: 0 .9rem;
    white-space: nowrap;
  }

  /* La cabecera tambien comia espacio. El "kicker" sobre el titulo se retira:
     el titulo ya se sostiene solo. */
  .cotizador-shell .reports-kicker { display: none; }
  .cotizador-shell .reports-hero { padding-block: .75rem; }
  .cotizador-shell .reports-hero .section-subtitle { display: none; }
  .cotizador-shell .reports-actions .btn { min-block-size: 44px; }
}

@media (max-width: 900px) {
  /* "Nueva cotizacion" ocupaba ~90px de alto. Sigue siendo la accion primaria
     y sigue a ancho completo, pero con la altura de un boton, no de un bloque. */
  .cotizador-shell .reports-actions { padding: 0; }
  .cotizador-shell .reports-actions .btn {
    min-block-size: 48px;
    block-size: 48px;
    padding-block: 0;
    font-size: var(--mgm-t-base);
    border-radius: var(--mgm-r-md);
  }
  /* Chips algo mas ajustados: caben cuatro estados en pantalla en vez de tres,
     asi se ve que la fila continua. */
  .cotizador-estado-tabs .cot-tab {
    min-block-size: 40px;
    padding: 0 .7rem;
    font-size: var(--mgm-t-sm);
  }
}

/* ===========================================================================
   COTIZADOR EN TELÉFONO — de botones de texto a símbolos
   El texto se retira; queda el icono. El chip ACTIVO conserva su etiqueta,
   para que nadie tenga que adivinar que significa cada simbolo.
   Todo boton de solo icono lleva aria-label y title.
   =========================================================================== */
@media (max-width: 900px) {

  /* --- Nueva cotización: un "+" sobre documento, no un bloque de texto --- */
  .cotizador-shell .reports-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .cotizador-shell .reports-actions .btn#cotizador-new-btn {
    inline-size: 52px;
    block-size: 52px;
    min-inline-size: 52px;
    min-block-size: 52px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mgm-r-lg);
    box-shadow: var(--mgm-sombra-2);
  }
  #cotizador-new-btn .btn-txt { display: none; }
  #cotizador-new-btn .ti { font-size: 1.6rem; }

  /* --- Chips de estado: símbolo siempre, etiqueta solo en el activo --- */
  .cotizador-estado-tabs .cot-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0 .6rem;
    border-radius: var(--mgm-r-md);
  }
  .cotizador-estado-tabs .cot-tab .cot-tab-ico { font-size: 1.15rem; line-height: 1; }
  .cotizador-estado-tabs .cot-tab .cot-tab-txt { display: none; }
  .cotizador-estado-tabs .cot-tab.active {
    padding: 0 .8rem;
    border-radius: var(--mgm-r-full);
  }
  .cotizador-estado-tabs .cot-tab.active .cot-tab-txt {
    display: inline;
    font-size: var(--mgm-t-sm);
    font-weight: 600;
  }
  /* El conteo se mantiene visible aunque el texto no: es dato, no adorno. */
  .cotizador-estado-tabs .cot-tab .tf-count {
    font-family: var(--mgm-mono);
    font-size: .625rem;
    padding: 0 .28rem;
    border-radius: var(--mgm-r-full);
    background: var(--mgm-n-200);
    color: var(--mgm-texto-2);
  }
  .cotizador-estado-tabs .cot-tab.active .tf-count {
    background: rgba(255,255,255,.22);
    color: #fff;
  }
}

@media (max-width: 900px) {
  /* La barra superior ya dice "Cotizador": el titulo repetido dejaba una
     banda vacia al lado del boton. La cabecera se reduce a su accion. */
  .cotizador-shell .reports-hero {
    padding: .5rem 0 .25rem;
    min-block-size: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .cotizador-shell .reports-hero-copy { display: none; }
  .cotizador-shell .reports-hero .reports-actions { margin-left: auto; }
}

/* Fila unica: Filtros a la izquierda, nueva cotizacion a la derecha.
   Antes cada uno tenia su propia fila. */
.mgm-cot-barra { display: flex; align-items: center; gap: .6rem; }

@media (max-width: 900px) {
  .mgm-cot-barra { margin-bottom: .55rem; }
  .mgm-cot-barra #cot-filter-toggle { margin-bottom: 0; block-size: 48px; }
  .mgm-cot-barra #cotizador-new-btn {
    margin-left: auto;
    inline-size: 48px; block-size: 48px;
    min-inline-size: 48px; min-block-size: 48px;
  }
  /* La cabecera queda vacia una vez el boton se muda a la fila de filtros. */
  .cotizador-shell .reports-hero { display: none; }
}