* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #f2f4f7;
    color: #1c2530;
}
/* --- Estructura general: barra lateral + contenido --- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 235px;
    flex-shrink: 0;
    background: #111827;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-logo { padding: 18px 18px 14px; }
.sidebar-logo img { max-width: 150px; width: 100%; height: auto; }
.sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 16px; }
.sidebar-group-label {
    display: inline-block;
    margin: 18px 18px 10px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--area-color, #334155);
    background: var(--area-color-suave, #e2e8f0);
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92em;
}
.sidebar-icon { font-size: 1.05em; width: 20px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-icon svg { width: 17px; height: 17px; }
.sidebar-link:hover { background: #1f2937; color: white; }
.sidebar-link.activo { background: #2563eb; color: white; }
.sidebar-link.disabled { color: #4b5563; cursor: default; }
.sidebar-footer {
    padding: 14px 18px;
    font-size: 0.7em;
    color: #4b5563;
    border-top: 1px solid #1f2937;
}

.app-main { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; }

.app-topbar {
    background: #111827;
    color: #e5e7eb;
    border-bottom: 1px solid #1f2937;
    padding: 12px 24px 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.4em;
    cursor: pointer;
    color: #e5e7eb;
}
.app-user { display: flex; align-items: center; gap: 10px; }
.app-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: #2563eb; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8em; flex-shrink: 0;
}
.app-user-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-user-text strong { font-size: 0.88em; color: #f3f4f6; }
.app-user-text span { font-size: 0.78em; color: #9ca3af; }
.app-logout { margin-left: 6px; font-size: 0.85em; color: #f87171; text-decoration: none; font-weight: 600; }
.app-logout:hover { text-decoration: underline; }

/* --- Selector "Ver como" (admin: previsualizar otros niveles) --- */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ver-como-wrap { position: relative; }
.ver-como-btn {
    list-style: none;
    display: flex; align-items: center; gap: 8px;
    background: #1f2937; color: #e5e7eb;
    border: 1px solid #374151; border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85em; font-weight: 600;
    cursor: pointer; user-select: none;
}
.ver-como-btn::-webkit-details-marker { display: none; }
.ver-como-btn:hover { background: #273244; }
.ver-como-activo {
    background: #2563eb; color: white;
    border-radius: 6px; padding: 2px 8px;
    font-size: 0.92em; font-weight: 700;
}
.ver-como-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #1f2937; border: 1px solid #374151; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    padding: 6px; min-width: 200px; z-index: 40;
    display: flex; flex-direction: column; gap: 2px;
}
.ver-como-opcion {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px;
    color: #cbd5e1; text-decoration: none; font-size: 0.88em; font-weight: 500;
}
.ver-como-opcion:hover { background: #2d3949; color: white; }
.ver-como-opcion.activo { background: #2563eb; color: white; font-weight: 700; }
.ver-como-opcion.ver-como-salir { margin-top: 4px; border-top: 1px solid #374151; padding-top: 10px; color: #fca5a5; }

.vista-previa-banner {
    background: #78350f; color: #fef3c7;
    padding: 10px 24px; font-size: 0.88em;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.vista-previa-banner a { color: #fef3c7; font-weight: 700; text-decoration: underline; margin-left: auto; }

.impersonar-banner {
    background: #4c1d95; color: #ede9fe;
    padding: 10px 24px; font-size: 0.88em;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.impersonar-banner a { color: #ede9fe; font-weight: 700; text-decoration: underline; margin-left: auto; }

.areas-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.areas-checklist-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 0.9em; font-weight: 500;
    cursor: pointer;
}
.areas-checklist-item input { width: auto; margin: 0; }

.campo-password {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.campo-password input { width: auto; flex: 1; min-width: 0; }
.campo-password button {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0 16px;
    font-size: 0.95em;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ver-como-btn span:not(.ver-como-activo) { display: none; }
}

@media (max-width: 900px) {
    .sidebar {
        display: none;
        position: fixed;
        inset: 0 auto 0 0;
        width: 235px;
        z-index: 50;
    }
    .app-shell.sidebar-abierta .sidebar { display: flex; }
    .hamburger { display: block; }
}

.container {
    margin: 0;
    padding: 20px 24px 60px 20px;
}
.form-card {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

h1 { font-size: 1.5em; margin-bottom: 4px; }
h2 { font-size: 1.2em; margin-top: 28px; }

.card {
    background: white;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

form label {
    display: block;
    font-weight: 600;
    margin: 14px 0 6px;
}

input, select, textarea {
    width: 100%;
    padding: 14px;
    font-size: 1.05em;
    border: 1px solid #ccd3db;
    border-radius: 8px;
    background: white;
}

textarea { min-height: 100px; resize: vertical; }

button, .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 16px 20px;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: white;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
button:active, .btn:active { background: #1d4ed8; }

.btn-secondary { background: #6b7280; }
.btn-danger { background: #dc2626; }

.alerta {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 600;
}
.alerta-ok { background: #dcfce7; color: #166534; }
.alerta-error { background: #fee2e2; color: #991b1b; }

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}
th, td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.92em;
}
th { background: #eef2f7; }

.estado {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
}
.estado-Pendiente { background: #fef3c7; color: #92400e; }
.estado-Enproceso { background: #dbeafe; color: #1e40af; }
.estado-Resuelto { background: #dcfce7; color: #166534; }
.estado-Falta { background: #fee2e2; color: #991b1b; }
.estado-Caducada { background: #f87171; color: #000; }
.estado-Tenemos { background: #cffafe; color: #155e75; }

/* Chips de estado por documento (tabla Resumen de Seguimiento de documentación) */
.tabla-resumen-doc th { text-align: center; }
.tabla-resumen-doc th:first-child { text-align: left; }
.tabla-resumen-doc td { text-align: center; vertical-align: middle; }
.tabla-resumen-doc td:first-child { text-align: left; }

/* Cabecera fija: al hacer scroll hacia abajo, la fila de títulos
   (Cliente, CBA, SARI...) se queda pegada justo debajo de la barra
   superior, para no perder la referencia de qué columna es cuál. */
.tabla-resumen-doc {
    /* La tabla base tiene overflow:hidden (para redondear esquinas), pero eso
       crea un nuevo contexto de posicionamiento y rompe el "position: sticky"
       de la cabecera (se queda pegada en el punto donde estaba al cargar la
       página, en vez de seguir el scroll). Se desactiva aquí para que el
       sticky funcione correctamente. */
    overflow: visible;
}
.tabla-resumen-doc thead th {
    position: sticky;
    top: var(--topbar-height, 60px);
    background: #eef2f7;
    z-index: 10;
    box-shadow: 0 2px 3px rgba(0,0,0,0.06);
}

/* Cabecera de tabla fija (uso general): misma idea que .tabla-resumen-doc de
   arriba, pero como clase reutilizable para cualquier tabla larga (Entradas,
   Salidas...). La fila de títulos se queda fija justo debajo de todo el
   bloque superior (banner + barra de acciones + resumen, si están envueltos
   en .cabecera-fija); solo las filas de datos se desplazan por debajo. */
.tabla-fija { overflow: visible; }
.tabla-fija thead th {
    position: sticky;
    top: calc(var(--topbar-height, 60px) + var(--cabecera-fija-height, 0px));
    z-index: 10;
    box-shadow: 0 2px 3px rgba(0,0,0,0.06);
}

/* Envoltorio "fijo": agrupa el banner, la barra de acciones y el resumen de
   una página para que todo el bloque se quede pegado arriba al hacer scroll
   (en vez de solo el banner), y solo las filas de la tabla se muevan por
   debajo. Se mide su altura real por JS (ver footer.php) para que la
   cabecera de la tabla (.tabla-fija) se enganche justo debajo sin hueco ni
   solape. */
.cabecera-fija {
    position: sticky;
    top: var(--topbar-height, 60px);
    z-index: 20;
    background: #f2f4f7;
    padding-bottom: 4px;
}

/* Barra de acciones/filtros compacta: botones y chips más pequeños y con
   menos espacio entre filas, para páginas con muchos controles (filtros,
   accesos rápidos) entre la cabecera y la tabla. */
.toolbar-compacta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.toolbar-compacta .btn,
.toolbar-compacta button.btn {
    width: auto;
    margin-top: 0;
    padding: 7px 14px;
    font-size: 0.82em;
}
.toolbar-compacta .chip {
    padding: 5px 12px;
    font-size: 0.82em;
    gap: 6px;
}
.toolbar-compacta .chip-separador { color: #9aa4b2; font-size: 0.82em; margin: 0 2px; }
.estado-doc {
    display: inline-block;
    min-width: 76px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
/* Colores específicos de la tabla Resumen de Seguimiento de documentación.
   Son clases propias (doc-falta, doc-pendiente...) y no las genéricas
   estado-Falta/estado-Pendiente/estado-Caducada de arriba, porque esas se
   usan también en Activos, Extintores, Facturación, Comercial, etc. — cambiar
   su color aquí habría cambiado el color en toda la aplicación sin querer. */
.doc-falta { background: #ffedd5; color: #c2410c; }
.doc-pendiente { background: #ede9fe; color: #5b21b6; }
.doc-solicitar { background: #fef9c3; color: #854d0e; }
.doc-caducada { background: #f87171; color: #000; }
.doc-ok { background: #dcfce7; color: #166534; }
.doc-tenemos { background: #cffafe; color: #155e75; }

/* Chips de estado del dashboard de Pruebas de Cumplimiento (residuos_pc_aviso.php) */
.estado-vencida { display:inline-block; padding:3px 8px; border-radius:6px; font-size:0.85em; font-weight:600; background:#fee2e2; color:#991b1b; }
.estado-programada { display:inline-block; padding:3px 8px; border-radius:6px; font-size:0.85em; font-weight:600; background:#dcfce7; color:#166534; }
.estado-inactiva { display:inline-block; padding:3px 8px; border-radius:6px; font-size:0.85em; font-weight:600; background:#f1f5f9; color:#64748b; }

.module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}
@media (min-width: 700px) {
    .module-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
    .module-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1300px) {
    .module-grid { grid-template-columns: repeat(6, 1fr); }
}
.module-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.module-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.module-card:active { transform: scale(0.98); }
.module-card.disabled { opacity: 0.75; }
.module-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 6px;
}
.module-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    color: white;
    flex-shrink: 0;
}
.module-title-row h3 { margin: 0; font-size: 1em; color: #1c2b3a; }
.module-body { padding: 8px 16px 6px; }
.module-body ul { margin: 0; padding-left: 18px; color: #555; font-size: 0.86em; line-height: 1.65; }
.module-footer { padding: 8px 16px 16px; }
.module-footer .acceder { color: #2563eb; font-weight: 700; font-size: 0.88em; }
.module-footer .no-disponible { color: #aaa; font-weight: 600; font-size: 0.85em; }
.module-soon {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff3cd;
    color: #856404;
    font-size: 0.7em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}
.c-blue { background: #2563eb; }
.c-green { background: #16a34a; }
.c-orange { background: #ea580c; }
.c-teal { background: #0d9488; }
.c-purple { background: #7c3aed; }
.c-red { background: #dc2626; }
.c-indigo { background: #4338ca; }
.c-emerald { background: #059669; }
.c-amber { background: #b45309; }
.c-slate { background: #475569; }
.c-pink { background: #db2777; }
.c-gray { background: #6b7280; }
.c-cyan { background: #0891b2; }

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}
.stat-box {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 14px 18px;
    min-width: 130px;
    flex: 1;
}
.stat-box .stat-num { font-size: 1.7em; font-weight: 800; color: #1c2b3a; line-height: 1.1; }
.stat-box .stat-label { font-size: 0.82em; color: #667; margin-top: 4px; }

.topbar-datetime {
    display: flex;
    gap: 10px;
}
.datetime-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f4f6f9;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
}
.dt-icon { font-size: 1.15em; }
.dt-text { display: flex; flex-direction: column; line-height: 1.15; }
.dt-label { font-size: 0.62em; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.dt-value { font-size: 0.88em; font-weight: 700; color: #1c2b3a; }
@media (max-width: 700px) {
    .topbar-datetime { display: none; }
}

.login-box {
    max-width: 380px;
    margin: 60px auto;
}

/* --- Vista de activos: barra lateral + ficha --- */
.md-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 16px;
}
.md-sidebar {
    width: 100%;
    max-width: 360px;
    flex-shrink: 0;
}
.md-filtros {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.md-filtros input, .md-filtros select {
    padding: 10px;
    font-size: 0.95em;
}
.md-list {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
    max-height: 70vh;
    overflow-y: auto;
}
.md-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f0f2f5;
}
.md-item:hover { background: #f7f9fc; }
.md-item.activo { background: #eaf1ff; border-left: 3px solid #2563eb; }
.md-item img {
    width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.md-item-sinfoto {
    width: 36px; height: 36px; border-radius: 6px; background: #f0f2f5;
    display: flex; align-items: center; justify-content: center; color: #aaa; flex-shrink: 0;
}
.md-item-text { display: flex; flex-direction: column; font-size: 0.85em; line-height: 1.3; flex: 1; min-width: 0; }
.md-item-text strong { font-size: 1em; }
.md-item-text span { color: #667; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.md-dot-ok { background: #16a34a; }
.md-dot-off { background: #cbd5e1; }

.md-content { flex: 1; min-width: 0; }
.md-cabecera { display: flex; gap: 16px; align-items: center; }
.md-foto-grande { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }

.md-tabs {
    display: flex;
    gap: 6px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.md-tab {
    padding: 9px 16px;
    border-radius: 8px;
    background: white;
    color: #333;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.md-tab.activo { background: #2563eb; color: white; }
.md-tab-disabled { color: #aaa; cursor: default; }
.md-tab-disabled small { font-weight: 400; }

@media (max-width: 800px) {
    .md-layout { flex-direction: column; }
    .md-sidebar { max-width: none; }
    .md-list { max-height: 300px; }
}

.subtitulo { color: #667; margin-top: -8px; margin-bottom: 16px; font-size: 0.92em; }

/* --- Chips de tipo de activo --- */
.chips-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
}
.chip.activo { border-color: #2563eb; background: #eaf1ff; }
.chip-icon { font-size: 1.3em; }
.chip-text { display: flex; flex-direction: column; font-size: 0.85em; line-height: 1.3; }
.chip-text strong { font-size: 1em; }
.chip-text span { color: #667; }

/* --- Ficha grande del activo (hero) --- */
.hero-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    gap: 40px;
    padding: 24px 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.hero-col-foto {
    width: 100%;
    max-width: 220px;
    flex-shrink: 0;
    text-align: center;
}
.hero-col-foto h2 { margin: 12px 0 3px; font-size: 1.25em; }
.hero-codigo { color: #888; margin: 0 0 10px; font-size: 0.95em; }
.hero-foto { width: 100%; height: 165px; object-fit: cover; border-radius: 10px; }
.hero-foto-vacia { display: flex; align-items: center; justify-content: center; background: #f0f2f5; color: #999; }
.hero-col { flex: 1; min-width: 200px; }
.hero-col h4 { margin: 0 0 14px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; color: #2563eb; }
.hero-datos { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 0; }
.hero-datos dt { color: #888; font-size: 0.88em; }
.hero-datos dd { margin: 0; font-weight: 600; font-size: 0.98em; }

.cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.cards-grid-2 .card h3 { margin-top: 0; }

/* --- Detalle del activo: submenú horizontal + contenido --- */
.md-detail-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.submenu-horizontal {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    position: sticky;
    top: calc(var(--topbar-height, 60px) + var(--indice-height, 0px) + var(--banner-height, 150px) + 40px);
    z-index: 8;
    background: #f2f4f7;
    padding: 8px 0;
}
.submenu-item {
    padding: 8px 13px;
    text-decoration: none;
    color: #444;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 20px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.submenu-item:hover { background: #f7f9fc; }
.submenu-item.activo { background: #2563eb; color: white; }
.submenu-item.submenu-disabled { color: #bbb; background: #f4f6f9; cursor: default; box-shadow: none; }
.md-detail-main { flex: 1; min-width: 0; }

/* --- Formulario de activo (alta/edición) --- */
.form-hero {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    gap: 20px;
    padding: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.form-foto-box {
    width: 220px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f2f5;
    flex-shrink: 0;
}
.form-foto-box img { width: 100%; height: 100%; object-fit: cover; }
.form-foto-box-xl { width: 340px; height: 300px; }
.form-hero-campos { flex: 1; min-width: 240px; }
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
}
.grid-2 label { margin: 10px 0 4px; }
.form-guardar-barra {
    position: sticky;
    bottom: 0;
    background: #f2f4f7;
    padding: 14px 0;
    margin-top: 10px;
}
.form-guardar-barra button { max-width: 280px; }

/* --- Pestaña "Partes": foto grande + formulario completo en dos columnas --- */
.partes-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.partes-info-card {
    width: 100%;
    max-width: 280px;
    flex-shrink: 0;
    text-align: center;
}
.partes-foto-grande {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}
.partes-info-card .hero-datos { text-align: left; }
.partes-form-card {
    flex: 1;
    min-width: 320px;
}

/* --- Grupos de botones tipo selector (Vigilancia: turno / estado) --- */
.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.btn-group input[type="radio"] { display: none; }
.btn-group label {
    padding: 12px 16px;
    border-radius: 8px;
    background: #f4f6f9;
    border: 1px solid #e5e7eb;
    color: #444;
    font-weight: 600;
    font-size: 0.92em;
    cursor: pointer;
    text-align: center;
    flex: 1;
    min-width: 100px;
}
.btn-group input[type="radio"]:checked + label { background: #2563eb; border-color: #2563eb; color: white; }
.btn-group input#e1:checked + label.label-ok { background: #16a34a; border-color: #16a34a; color: white; }
.btn-group input#e2:checked + label.label-incidencia { background: #dc2626; border-color: #dc2626; color: white; }

/* --- Comprobaciones rápidas: etiqueta + interruptor en la misma línea --- */
.check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid #f0f2f5;
}
.check-row:last-child { border-bottom: none; }
.check-row .check-label { font-weight: 600; color: #333; font-size: 0.95em; flex: 1; }
.check-row input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
.bienmal-group { display: flex; gap: 4px; flex-shrink: 0; }
.bienmal-group input[type="radio"] { display: none; }
.bienmal-btn {
    padding: 6px 14px; border-radius: 20px; border: 1px solid #e5e7eb;
    background: #f4f6f9; color: #555; font-weight: 700; font-size: 0.82em;
    cursor: pointer; user-select: none;
}
.bienmal-group input:checked + .bienmal-bien { background: #16a34a; border-color: #16a34a; color: #fff; }
.bienmal-group input:checked + .bienmal-mal { background: #dc2626; border-color: #dc2626; color: #fff; }
.bienmal-group input:checked + .bienmal-pendiente { background: #d97706; border-color: #d97706; color: #fff; }
.check-row-pendiente { background: #fffbeb; }

@media (max-width: 600px) {
    .check-row { flex-wrap: wrap; row-gap: 10px; }
    .check-row .bienmal-group { width: 100%; justify-content: flex-start; }
    .bienmal-btn { padding: 7px 12px; font-size: 0.8em; }
}
.revision-item-foto {
    width: 84px; height: 84px; border-radius: 10px; object-fit: cover;
    flex-shrink: 0; background: #f0f2f5;
}
.revision-item-sinfoto { display: flex; align-items: center; justify-content: center; font-size: 2em; }
.chk-estado-texto {
    font-size: 0.78em; font-weight: 700; padding: 3px 10px; border-radius: 12px;
    flex-shrink: 0; white-space: nowrap;
}
.chk-estado-pendiente { color: #92400e; background: #fef3c7; }
.chk-estado-bien { color: #15803d; background: #dcfce7; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e5e7eb;
    border-radius: 26px;
    transition: 0.2s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: #16a34a; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* --- Ficha mini de activo seleccionado (Nueva incidencia / avería) --- */
.ficha-activo-mini {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: #f7f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 4px;
}
.ficha-activo-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ficha-activo-foto img,
.ficha-activo-sinfoto {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #e5e7eb;
}
.ficha-activo-sinfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68em;
    color: #98a2b3;
    text-align: center;
}
.ficha-activo-ubicacion {
    font-size: 0.78em;
    color: #555;
    white-space: nowrap;
}
.ficha-activo-divisor { width: 1px; background: #e2e5ea; }
.ficha-activo-datos {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.ficha-activo-datos .ficha-tipo {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}
.ficha-activo-datos .ficha-nombre {
    font-size: 1.05em;
    font-weight: 700;
    color: #1e3a5f;
}

/* --- Seguimiento de avería: pasos tipo interruptor con fecha en la misma línea --- */
.seguimiento-card { padding: 6px 14px; }
.check-row-seguimiento { justify-content: flex-start; gap: 12px; }
.check-row-seguimiento .check-label { flex: 1; }
.check-row-seguimiento .seguimiento-fecha {
    width: 148px;
    flex-shrink: 0;
    padding: 8px 10px;
    font-size: 0.92em;
}
.check-row-seguimiento .seguimiento-fecha:disabled { opacity: 0.45; background: #f4f6f9; }
.check-row-inicio {
    background: #f0fdf4;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
}
.seguimiento-check-ok {
    color: #16a34a;
    font-weight: 700;
    font-size: 1.15em;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .md-detail-layout { flex-direction: column; }
    .submenu-horizontal { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .check-row-seguimiento { flex-wrap: wrap; }
    .check-row-seguimiento .seguimiento-fecha { width: 100%; margin-top: 6px; order: 3; }

    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    tr { margin-bottom: 12px; border: 1px solid #eef0f3; border-radius: 8px; padding: 8px; }
    td { border: none; padding: 4px 6px; }
    td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #555;
    }
}

/* --- Ficha rediseñada: Vehículos y Grupos Electrógenos (activos.php) --- */
.hero-card-v2 { gap: 32px; }
.hero-col-ring {
    flex-shrink: 0;
    width: 150px;
    text-align: center;
    position: relative;
    padding-top: 4px;
}
.ring-svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.ring-track, .ring-progreso {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.ring-track { stroke: #eef1f5; }
.ring-progreso { transition: stroke-dashoffset 0.4s ease; }
.ring-texto {
    position: absolute;
    top: 46px;
    left: 0;
    width: 130px;
    text-align: center;
}
.ring-score { font-size: 1.55em; font-weight: 800; }
.ring-label { margin: 6px 0 0; font-weight: 700; font-size: 0.95em; }
.ring-sub { margin: 2px 0 0; color: #94a3b8; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; }

.sistemas-card { margin: 20px 0; }
.sistemas-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sistema-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    flex: 1;
    min-width: 150px;
    border: 1px solid transparent;
}
.sistema-icono { font-size: 1.3em; }
.sistema-texto { display: flex; flex-direction: column; font-size: 0.85em; line-height: 1.3; }
.sistema-texto strong { font-size: 1em; color: #1c2b3a; }
.sistema-ok { background: #f0fdf4; border-color: #bbf7d0; }
.sistema-ok .sistema-texto span { color: #16a34a; font-weight: 700; }
.sistema-warn { background: #fffbeb; border-color: #fde68a; }
.sistema-warn .sistema-texto span { color: #d97706; font-weight: 700; }
.sistema-bad { background: #fef2f2; border-color: #fecaca; }
.sistema-bad .sistema-texto span { color: #dc2626; font-weight: 700; }
.sistemas-nota { margin: 12px 0 0; color: #94a3b8; font-size: 0.78em; }

.donut-layout { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-canvas-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.donut-centro {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.1;
}
.donut-centro strong { display: block; font-size: 1.4em; color: #1c2b3a; }
.donut-centro span { font-size: 0.7em; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.donut-leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 140px; font-size: 0.88em; }
.donut-leyenda li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: #444; }
.donut-leyenda li strong { margin-left: auto; color: #1c2b3a; }
.donut-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.incidencias-kpis { display: flex; gap: 20px; margin-bottom: 14px; }
.incidencias-kpis div { display: flex; flex-direction: column; }
.incidencias-kpis strong { font-size: 1.5em; color: #1c2b3a; line-height: 1.1; }
.incidencias-kpis span { font-size: 0.78em; color: #667; margin-top: 2px; }

/* --- Indicadores tipo KPI con icono (ficha de cliente y otros resúmenes) --- */
.kpi-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
.kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 16px 18px;
    flex: 1;
    min-width: 170px;
}
.kpi-icono {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}
.kpi-icono svg { width: 22px; height: 22px; }
.kpi-texto { display: flex; flex-direction: column; min-width: 0; }
.kpi-valor { font-size: 1.4em; font-weight: 800; color: #1c2b3a; line-height: 1.15; white-space: nowrap; }
.kpi-label { font-size: 0.78em; color: #667; margin-top: 2px; }

/* --- Herramientas plegables (listado maestro con acciones de sincronización) --- */
.herramientas-plegable { margin: 0 0 14px; }
.herramientas-plegable summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85em;
    color: #374151;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f3f4f6;
    list-style: none;
}
.herramientas-plegable summary::-webkit-details-marker { display: none; }
.herramientas-plegable summary::before { content: "⚙️ "; }
.herramientas-plegable[open] summary { margin-bottom: 6px; }
.herramientas-plegable .herramienta-link {
    display: block;
    padding: 6px 10px;
    font-size: 0.85em;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}
.herramientas-plegable .herramienta-link.alerta { color: #dc2626; }
.herramientas-plegable .herramienta-link:hover { text-decoration: underline; }

/* --- Ficha de cliente estilo "dashboard" (residuos_clientes.php) --- */
.ficha-banner {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    height: 130px;
    line-height: 0;
}
.ficha-banner svg { width: 100%; height: 100%; display: block; }
.ficha-banner-foto {
    background-size: cover;
    background-position: center;
}

.ficha-top-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.ficha-top-row > .card { flex: 1; min-width: 240px; margin: 0; }

.card-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.85em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #166534;
}
.card-titulo .card-titulo-icono {
    width: 24px; height: 24px; border-radius: 7px;
    background: #dcfce7; color: #16a34a;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-titulo .card-titulo-icono svg { width: 14px; height: 14px; }

.info-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f3f6; }
.info-row:last-child { border-bottom: none; }
.info-icono {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
    background: #eff6ff; color: #2563eb;
    display: flex; align-items: center; justify-content: center;
}
.info-icono svg { width: 14px; height: 14px; }
.info-texto { display: flex; flex-direction: column; min-width: 0; }
.info-label { font-size: 0.7em; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.info-valor { font-weight: 700; color: #1c2b3a; font-size: 0.92em; word-break: break-word; }

.ficha-identidad { text-align: center; }
.ficha-identidad-foto {
    width: 84px; height: 84px; border-radius: 16px; margin: 0 auto 12px;
    background: #f0fdf4; color: #16a34a;
    display: flex; align-items: center; justify-content: center;
}
.ficha-identidad-foto svg { width: 40px; height: 40px; }
.ficha-identidad h2 { margin: 0 0 4px; font-size: 1.15em; }
.ficha-identidad-meta { color: #888; font-size: 0.85em; margin: 0 0 10px; }
.ficha-identidad-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ficha-identidad-acciones a { font-size: 0.85em; font-weight: 700; }

.resumen-cliente-card { margin-top: 18px; }
.kpi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi-grid-2 .kpi-card { min-width: 0; }

.actividad-lista { list-style: none; margin: 0; padding: 0; }
.actividad-lista li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f3f6; }
.actividad-lista li:last-child { border-bottom: none; }
.actividad-punto { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-top: 6px; flex-shrink: 0; }
.actividad-texto { display: flex; flex-direction: column; }
.actividad-titulo { font-weight: 700; color: #1c2b3a; font-size: 0.9em; }
.actividad-sub { font-size: 0.8em; color: #888; }
.actividad-fecha { font-size: 0.75em; color: #94a3b8; margin-bottom: 2px; }

@media (max-width: 900px) {
    .ficha-top-row { flex-direction: column; }
    .kpi-grid-2 { grid-template-columns: 1fr; }
}

/* --- Banner de página completa con título superpuesto (cabecera tipo "hero") --- */
.pagina-banner {
    position: fixed;
    top: calc(var(--topbar-height, 60px) + var(--indice-height, 0px) + 20px);
    left: 255px;
    right: 24px;
    z-index: 10;
    border-radius: 14px;
    overflow: hidden;
    min-height: 150px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
/* Reserva el hueco exacto que ocupaba el banner, para que el contenido
   de la página no arranque tapado debajo de él. */
.pagina-banner + * {
    margin-top: calc(var(--banner-height, 150px) + 40px) !important;
}
@media (max-width: 900px) {
    .pagina-banner { left: 20px; right: 20px; }
}
.pagina-banner-foto { background-size: cover; background-position: center; }
.pagina-banner-svg { line-height: 0; }
.pagina-banner-svg svg { width: 100%; height: 150px; display: block; position: absolute; top: 0; left: 0; }
.pagina-banner-overlay {
    position: relative;
    z-index: 2;
    padding: 0 32px;
    max-width: 60%;
    line-height: normal;
}
.pagina-banner-overlay h1 {
    margin: 0 0 4px;
    font-size: 2.05em;
    color: #0f2a3d;
    text-shadow: 0 1px 12px rgba(255,255,255,0.5);
}
.pagina-banner-overlay .subtitulo {
    margin: 0;
    color: #33475a;
    font-weight: 500;
    text-shadow: 0 1px 10px rgba(255,255,255,0.5);
}
@media (max-width: 800px) {
    .pagina-banner-overlay { max-width: 100%; }
    .pagina-banner { flex-direction: column; align-items: flex-start; padding-top: 16px; }
}

@media (max-width: 700px) {
    .hero-col-ring { width: 100%; margin: 0 auto; }
    .donut-layout { justify-content: center; }
}

/* Tabla más compacta que la estándar (menos aire vertical/horizontal en cada celda). Usada en Tarifas vigentes. */
.tabla-compacta th, .tabla-compacta td { padding: 6px 10px; font-size: 0.92em; }

/* Campo "Nº registro" de PC: resalta en naranja mientras está vacío (aún sin informe recibido). */
.pc-ref-vacio { background: #fff7ed; border-color: #fb923c; }

/* Formularios de 2 columnas (clientes, activos, equipos, instalaciones, planes, etc.).
   Antes esta clase no tenía regla propia y los <label> caían en el "form label { display:block }"
   general, apilándose en una sola columna. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
}
.form-grid label { margin: 10px 0 6px; }
@media (max-width: 700px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* Variante de 3 columnas a ancho completo, con apartados (usada en fichas grandes
   como Modificar cliente). No se toca .form-grid para no afectar a los formularios
   que ya la usan a 2 columnas. */
.form-card-ancho { max-width: none; }
.form-section { margin-bottom: 6px; }
.form-section-titulo {
    font-size: 1.02em;
    font-weight: 700;
    color: #1c2530;
    margin: 26px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}
.form-section:first-of-type .form-section-titulo { margin-top: 4px; }
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 24px;
}
.form-grid-3 label { margin: 10px 0 6px; }
@media (max-width: 1100px) {
    .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .form-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Plan de Mantenimiento: agrupación por activo, prioridad y Gantt
   ============================================================ */

/* --- Lista lateral agrupada por activo (acordeón con <details>) --- */
.md-list-agrupada { padding: 0; }
.md-grupo-activo { border-bottom: 1px solid #f0f2f5; }
.md-grupo-activo:last-child { border-bottom: none; }
.md-grupo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 700;
    color: #1c2b3a;
    background: #fafbfc;
    list-style: none;
}
.md-grupo-header::-webkit-details-marker { display: none; }
.md-grupo-header::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: #94a3b8;
    transition: transform 0.15s ease;
}
details[open] > .md-grupo-header::before { transform: rotate(90deg); }
.md-grupo-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-grupo-nombre small { color: #889; font-weight: 500; }
.md-grupo-badges { display: flex; gap: 6px; flex-shrink: 0; }
.badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 700;
    color: white;
}
.badge-mini-rojo { background: #dc2626; }
.badge-mini-naranja { background: #f59e0b; }

/* --- Indicador de prioridad (punto de color) --- */
.punto-prioridad {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* --- Selector de vista Lista/Gantt --- */
.cabecera-vista-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.chip-pequeño { padding: 7px 12px; font-size: 0.85em; }

/* --- Vista Gantt --- */
.gantt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.gantt-toolbar-label { font-size: 0.85em; color: #667; font-weight: 600; }
.gantt-wrap {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 36px 16px 16px;
    overflow-x: auto;
}
.gantt-escala { position: relative; height: 20px; margin-bottom: 8px; }
.gantt-escala-etiquetas { position: relative; height: 100%; }
.gantt-escala-marca {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.75em;
    color: #94a3b8;
    white-space: nowrap;
}
.gantt-grupo { margin-bottom: 10px; }
.gantt-grupo-nombre {
    font-size: 0.85em;
    font-weight: 700;
    color: #1c2b3a;
    padding: 6px 0 4px;
    border-top: 1px solid #f0f2f5;
}
.gantt-grupo-nombre small { color: #889; font-weight: 500; }
.gantt-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}
.gantt-fila-etiqueta {
    width: 260px;
    flex-shrink: 0;
    font-size: 0.85em;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gantt-estimada-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.75em;
    color: #7c3aed;
    background: #f3e8ff;
    border-radius: 6px;
    padding: 1px 6px;
    font-weight: 600;
}
.gantt-fila-track {
    position: relative;
    flex: 1;
    min-width: 300px;
    height: 18px;
    background: linear-gradient(to right, #f7f9fc, #f7f9fc);
    border-radius: 4px;
}
.gantt-marca {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    cursor: pointer;
}
.gantt-marca-vencida { background: #dc2626; }
.gantt-marca-proxima { background: #f59e0b; }
.gantt-marca-programada { background: #16a34a; }
.gantt-linea-hoy {
    position: absolute;
    top: 36px;
    bottom: 16px;
    width: 2px;
    background: #2563eb;
    opacity: 0.5;
}
.gantt-linea-hoy span {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7em;
    font-weight: 700;
    color: #2563eb;
    background: #eaf1ff;
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
}
.gantt-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    font-size: 0.8em;
    color: #667;
}
.gantt-leyenda span { display: flex; align-items: center; gap: 6px; }
.gantt-leyenda .gantt-marca { width: 10px; height: 10px; }

@media (max-width: 800px) {
    .gantt-fila-etiqueta { width: 160px; font-size: 0.8em; }
}

/* ============================================================
   Plan de Mantenimiento: Vista Tabla y Vista Anual
   ============================================================ */

.btn-pequeño {
    display: inline-block;
    margin-top: 0;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 6px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
}
.btn-pequeño:active { background: #1d4ed8; }

.gantt-toolbar-nota { font-size: 0.8em; color: #889; }

/* --- Tabla ancha (Vista Tabla y Vista Anual) --- */
.tabla-plan-wrap {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow-x: auto;
    padding: 4px;
}
.tabla-plan {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 0.88em;
}
.tabla-plan th {
    text-align: left;
    padding: 10px 12px;
    background: #f7f9fc;
    color: #445;
    font-weight: 700;
    border-bottom: 2px solid #eef1f5;
}
.tabla-plan td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}
.tabla-plan tbody tr:hover { background: #fafbfc; }
.tabla-plan small { color: #889; }

/* --- Vista Anual: columnas de mes estrechas y centradas --- */
.ta-col-activo { min-width: 160px; }
.ta-col-mes { width: 34px; text-align: center; padding-left: 4px; padding-right: 4px; }
.punto-anual {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}
.punto-anual-verde { background: #16a34a; }
.punto-anual-rojo { background: #dc2626; }
.punto-anual-manual { border-color: #94a3b8; }
span.punto-anual { cursor: default; }

@media (max-width: 900px) {
    .tabla-plan { font-size: 0.82em; }
}

/* ============================================================
   Banners "estrechos": para las fotos generadas con degradado a
   blanco por la izquierda (Plan de Mantenimiento, Vehículos, Grupos
   Electrógenos, Equipos, Infraestructuras). Con estas imágenes, cover
   las recorta y las deja gigantes/desenfocadas en una franja de 150px;
   contain las encoge dentro del mismo espacio y las ancla a la derecha,
   dejando que el propio degradado blanco de la imagen se funda con el
   fondo. No se toca .pagina-banner-foto para no afectar a los demás
   banners del sitio (Activos, Residuos, PC, Vigilancia...), que están
   recortados para "cover" y ya se ven bien así.

   IMPORTANTE: a propósito NO se usan aquí trucos CSS recientes
   (variables CSS en background-image, pseudo-elementos ::before/::after,
   filter:blur, transform, inset) — la primera versión con esas técnicas
   dejaba de mostrar la imagen en algunos navegadores. Esta versión usa
   solo "background con varias capas", compatible desde hace más de
   10 años: la 1ª capa (el degradado) se pinta ENCIMA de la 2ª (la
   foto), y ahí está todo el efecto de difuminado — sin filtros ni capas
   aparte.
   ============================================================ */
.pagina-banner-foto-estrecha {
    min-height: 190px !important;
    background-color: #f5f2f2;
    background-size: auto 170% !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
}