:root {
    --color-primario: #554596;
    --color-primario-hover: #554596;
    --color-secundario: #009985;
    --color-fondo: #F7F7F7;
    --color-card: #FFFFFF;
    --color-borde: #DDDDDD;
    --color-texto: #000000;
    --color-texto-suave: #555555;
    --color-ok: #009985;
    --color-error: #E5007E;
    --radio: 12px;
    --sombra: 0 8px 24px rgba(15, 76, 129, 0.08);
}

/* Tablas: desplazamiento horizontal arriba y abajo y orden por columnas. */
.tabla-scroll-superior,
.tabla-scroll-inferior { overflow-x:auto; max-width:100%; }
.tabla-scroll-superior { height:17px; margin:8px 0 5px; border:1px solid #DDDDDD; border-radius:7px; background:#f4f7fa; }
.tabla-scroll-superior > div { height:1px; }
.tabla-scroll-inferior { margin-bottom:8px; }
th.columna-ordenable { cursor:pointer; user-select:none; }
th.columna-ordenable:hover { filter:brightness(1.08); }
.indicador-orden { display:inline-block; margin-left:6px; font-size:11px; opacity:.9; }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
}

h1, h2, h3 {
    margin-top: 0;
    color: var(--color-primario);
}

a {
    color: var(--color-primario);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
}

/* Listados con muchas columnas, como Clientes, aprovechan el monitor completo. */
.container-wide {
    max-width: 2200px;
}

.container-wide table th,
.container-wide table td {
    padding: 6px 7px;
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* Resumen técnico de Equipamiento: aprovecha todo el monitor sin comprimir columnas. */
@media (min-width: 1000px) {
    .container-equipamiento { width: calc(100vw - 40px); max-width: none; }
}
.container-equipamiento .tabla { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--color-borde); border-radius:10px; }
.container-equipamiento .tabla table { display:table; width:2050px; min-width:2050px; table-layout:auto; margin:0; }
.container-equipamiento .tabla th,
.container-equipamiento .tabla td { min-width:95px; white-space:normal; overflow-wrap:normal; word-break:normal; }
.container-equipamiento .tabla th:first-child,
.container-equipamiento .tabla td:first-child { min-width:175px; }

@media (min-width: 1000px) {
    .container-wide {
        width: calc(100vw - 40px);
        max-width: none;
    }
    .container-wide table {
        table-layout: fixed;
    }
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 20px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.topbar .usuario {
    color: var(--color-texto-suave);
    font-size: 14px;
}
.usuario-activo { display:flex; align-items:center; gap:9px; }
.usuario-activo img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid var(--color-borde); }
.usuario-activo span { min-width:0; }

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

.menu-card {
    display: block;
    padding: 18px;
    border-radius: var(--radio);
    border: 1px solid var(--color-borde);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--sombra);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: var(--color-texto);
}

.menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 76, 129, 0.14);
    text-decoration: none;
}

.menu-card strong {
    display: block;
    font-size: 16px;
    color: var(--color-primario);
    margin-bottom: 6px;
}

.menu-card span {
    font-size: 13px;
    color: var(--color-texto-suave);
}

.menu-card .menu-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #e8f2fb;
    color: var(--color-primario);
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
}

.menu-card:hover .menu-icon {
    background: var(--color-primario);
    color: #fff;
}

.avatar { width:44px !important; height:44px !important; max-width:44px !important; max-height:44px !important; border-radius:50% !important; object-fit:cover !important; border:1px solid var(--color-borde); display:block !important; }
.avatar-grande { width:80px !important; height:80px !important; max-width:80px !important; max-height:80px !important; border-radius:50% !important; object-fit:cover !important; border:1px solid var(--color-borde); display:block !important; margin:0 0 8px; }
.logo-cliente { width:62px !important; height:48px !important; max-width:62px !important; max-height:48px !important; object-fit:contain !important; border:1px solid var(--color-borde); border-radius:6px; background:#fff; padding:3px; display:block !important; }
.logo-cliente-grande { width:150px !important; height:82px !important; max-width:150px !important; max-height:82px !important; object-fit:contain !important; border:1px solid var(--color-borde); border-radius:8px; background:#fff; padding:5px; display:block !important; margin:0 0 8px; }
.identidad-listado { display:flex; align-items:center; gap:9px; min-width:145px; }
.logo-listado { width:52px !important; height:38px !important; max-width:52px !important; max-height:38px !important; flex:0 0 52px; object-fit:contain !important; border:1px solid var(--color-borde); border-radius:6px; background:#fff; padding:3px; display:block !important; }
.logo-marca-listado { width:58px !important; height:38px !important; max-width:58px !important; max-height:38px !important; flex:0 0 58px; object-fit:contain !important; border-radius:5px; background:#fff; padding:2px; display:block !important; }

form {
    width: 100%;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: var(--color-primario);
}

input,
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    margin: 0 0 14px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: #fff;
    color: var(--color-texto);
    font-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.12);
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

button,
.boton,
a.boton {
    display: inline-block;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--color-primario);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

button:hover,
.boton:hover,
a.boton:hover {
    background: var(--color-primario-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

.boton-secundario {
    background: var(--color-secundario);
}

.boton-secundario:hover {
    background: #009985;
}

.boton-light {
    background: #eaf2f8;
    color: var(--color-primario);
    border: 1px solid var(--color-borde);
}

.boton-light:hover {
    background: #dce9f3;
}

.alert-ok {
    background: #edf9f1;
    color: var(--color-ok);
    border: 1px solid #bfe7ca;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.alert-error {
    background: #fff1f1;
    color: var(--color-error);
    border: 1px solid #f3c2c2;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra);
}

th, td {
    border: 1px solid var(--color-borde);
    padding: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

th {
    background: #eef4fa;
    color: var(--color-primario);
}

tr:nth-child(even) td {
    background: #fbfdff;
}

.section-title {
    margin-top: 28px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e6eef5;
    color: var(--color-primario);
}

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

.foto-item {
    padding: 12px;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sombra);
}

img.thumb {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
}

canvas {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: #fff;
    width: 100%;
    max-width: 420px;
    height: 180px;
    touch-action: none;
}

.login-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    box-shadow: var(--sombra);
    padding: 28px;
}

.login-box h2 {
    margin-bottom: 8px;
}

.login-logo {
    display: block;
    width: 210px;
    max-width: 100%;
    height: 74px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 16px;
}

.login-box p {
    color: var(--color-texto-suave);
    margin-top: 0;
    margin-bottom: 20px;
}

.checkbox-row {
    margin: 8px 0 16px;
}

.actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 780px) {
    .grid,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    body {
        padding: 12px;
    }

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

/* ===== Versión móvil / teléfono ===== */
@media (max-width: 780px) {
    body {
        padding: 10px;
        font-size: 16px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .container { max-width: 100%; }

    .card {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 14px;
    }

    h1 { font-size: 23px; line-height: 1.2; }
    h2 { font-size: 20px; }
    h3 { font-size: 17px; }

    .topbar { gap: 12px; }
    .topbar > div:last-child { width: 100%; display: flex; gap: 8px; }
    .topbar > div:last-child .boton,
    .topbar > div:last-child .boton-light { flex: 1; text-align: center; }

    .menu-grid { grid-template-columns: 1fr; gap: 10px; }
    .menu-card { padding: 16px; }
    .menu-card strong { font-size: 18px; }
    .menu-card span { font-size: 14px; line-height: 1.35; display: block; }

    input, select, textarea {
        font-size: 16px;
        min-height: 46px;
        margin-bottom: 16px;
    }

    textarea { min-height: 110px; }
    button, .boton, a.boton, .boton-light { min-height: 46px; padding: 12px 14px; }

    .actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .actions .boton, .actions button { width: 100%; text-align: center; }

    /* Las planillas anchas continúan disponibles desplazando lateralmente. */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    th, td { font-size: 13px; white-space: normal; }
    .tabla, .tabla-seguimiento { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Clientes conserva columnas legibles y se desplaza lateralmente. */
    .tabla-clientes-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--color-borde);
        border-radius: 12px;
    }
    .tabla-clientes-scroll .tabla-clientes {
        display: table;
        width: 1040px;
        min-width: 1040px;
        table-layout: auto;
        margin: 0;
    }
    .tabla-clientes th,
    .tabla-clientes td {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        min-width: 88px;
        font-size: 13px;
    }
    .tabla-clientes th:nth-child(2),
    .tabla-clientes td:nth-child(2) { min-width: 170px; }
    .tabla-clientes th:nth-child(3),
    .tabla-clientes td:nth-child(3) { min-width: 150px; }
    .tabla-clientes th:last-child,
    .tabla-clientes td:last-child { min-width: 130px; }
    .aviso-desplazar {
        margin: 8px 0;
        padding: 9px 10px;
        background: #eef4fb;
        border-radius: 8px;
        font-size: 13px;
        color: var(--color-primario);
    }

    .filtros { flex-direction: column; align-items: stretch !important; }
    .filtros > div, .filtros button { width: 100%; }
    .grupo { padding: 12px; }
    .resumen-seguimiento { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; }
}


/* ===== Cabecera hoja de servicio con logos ===== */

.hoja-header {
    background: #ffffff;
    color: #111;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 22px;
    border: 1px solid #DDDDDD;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.hoja-header-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.logo-principal {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
}

.logo-principal img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.hoja-header-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.logo-marca {
    background: #ffffff;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    min-height: 54px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.logo-marca img {
    max-height: 34px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.logo-box-blanco {
    background: #fff;
    border: 1px solid #d8d8d8;
}

.hoja-header-titulo {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #000000;
}

/* Cabecera web alineada con el diseño de la hoja de servicio impresa. */
.hoja-header-pdf { padding: 18px 22px 14px; }
.hoja-header-pdf-superior { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-bottom:12px; border-bottom:1px solid #e4e9ef; }
.hoja-logo-lumila { width:310px; max-width:38%; max-height:100px; object-fit:contain; object-position:left center; }
.hoja-header-pdf .hoja-header-titulo { flex:1; text-align:right; font-size:26px; color:#252122; letter-spacing:0; }
.hoja-header-contacto { display:flex; flex-wrap:wrap; gap:7px 20px; padding:11px 0 9px; font-size:14px; color:#374151; }
.hoja-header-contacto span::first-letter { color:#149fd2; }

/* Encabezado oficial entregado por Lumila para las hojas de servicio. */
.hoja-header-imagen { padding: 10px 16px; }
.hoja-header-imagen img { display:block; width:100%; height:auto; max-height:210px; object-fit:contain; object-position:center; }

@media (max-width: 560px) {
    .hoja-header-main {
        grid-template-columns: 1fr;
    }

    .logo-principal {
        min-height: 74px;
    }

    .logo-principal img {
        max-height: 48px;
    }

    .logo-marca img {
        max-height: 30px;
        max-width: 120px;
    }

    .hoja-header-titulo {
        font-size: 18px;
    }

    .hoja-header-pdf { padding:14px; }
    .hoja-header-pdf-superior { align-items:flex-start; gap:14px; }
    .hoja-logo-lumila { width:145px; max-width:44%; max-height:70px; }
    .hoja-header-pdf .hoja-header-titulo { font-size:17px; text-align:right; }
    .hoja-header-contacto { font-size:12px; gap:5px 10px; }
    .hoja-header-imagen { padding:8px; }
    .hoja-header-imagen img { max-height:none; }
}

/* ===== Renovación cromática general · 12/09/2026 ===== */
:root {
    --azul-vivo: #009FE3;
    --celeste-vivo: #0891b2;
    --verde-vivo: #16a34a;
    --turquesa-vivo: #009985;
    --violeta-vivo: #554596;
    --naranja-vivo: #ea580c;
    --ambar-vivo: #ca8a04;
    --rojo-vivo: #E5007E;
    --rosa-vivo: #E5007E;
}

/* Fondo más vivo sin perder limpieza. */
body:not(.dashboard-inicio):not(.login-fondo) {
    background:
        radial-gradient(circle at 8% 0%, rgba(37,99,235,.07), transparent 30%),
        radial-gradient(circle at 92% 6%, rgba(15,118,110,.07), transparent 28%),
        linear-gradient(135deg, #f4f8fc 0%, #eef6f8 48%, #f7f4fb 100%);
    background-attachment: fixed;
}

/* Tarjetas generales con un poco más de profundidad. */
.card {
    border-color: #d6e2ef;
    box-shadow: 0 10px 28px rgba(24, 58, 91, .09);
}

/* Títulos internos: franja de color y fondo suave. */
.section-title,
.titulo-seccion,
.titulo-bloque {
    position: relative;
    padding: 9px 12px 9px 16px;
    border-bottom: 0;
    border-radius: 9px;
    background: linear-gradient(90deg, #eaf3ff 0%, rgba(234,243,255,.18) 100%);
    color: #174a7e;
}
.section-title::before,
.titulo-seccion::before,
.titulo-bloque::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 5px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--azul-vivo), var(--celeste-vivo));
}

/* Formularios: foco más claro y etiquetas con mejor jerarquía. */
label { color: #1f4f7c; }
input,
select,
textarea {
    border-color: #cbd9e8;
    box-shadow: inset 0 1px 0 rgba(15,76,129,.02);
}
input:focus,
select:focus,
textarea:focus {
    border-color: #2794c2;
    box-shadow: 0 0 0 3px rgba(8,145,178,.14), 0 4px 12px rgba(15,76,129,.06);
}

/* Botones: más modernos, manteniendo acciones peligrosas en rojo. */
button:not(.btn-danger):not(.boton-eliminar):not(.quitar):not(.boton-light):not(.boton-secundario):not(.equipo-opcion),
.boton,
a.boton {
    background: linear-gradient(135deg, #009FE3 0%, #009FE3 100%);
    box-shadow: 0 5px 12px rgba(15,76,129,.16);
}
button:not(.btn-danger):not(.boton-eliminar):not(.quitar):not(.boton-light):not(.boton-secundario):not(.equipo-opcion):hover,
.boton:hover,
a.boton:hover {
    background: linear-gradient(135deg, #554596 0%, #009985 100%);
    box-shadow: 0 7px 16px rgba(15,76,129,.20);
}
.boton-secundario {
    background: linear-gradient(135deg, #009985 0%, #009985 100%) !important;
    color: #fff !important;
}
.boton-secundario:hover { background: linear-gradient(135deg, #009985, #009985) !important; }
.boton-light {
    background: linear-gradient(180deg, #f7fbff 0%, #eaf4fd 100%);
    color: #145183;
    border-color: #bfd6ea;
}
.boton-light:hover {
    background: #dceefc;
    color: #554596;
}
.btn-danger,
.boton-eliminar,
.quitar,
.boton-eliminar-adjunto {
    background: linear-gradient(135deg, #E5007E, #E5007E) !important;
    color: #fff !important;
}

/* Tablas: encabezados con color, filas más fáciles de seguir y hover. */
th {
    background: linear-gradient(180deg, #e7f2fc 0%, #dcecf8 100%);
    color: #154b78;
    border-color: #cbdceb;
}
tr:nth-child(even) td { background: #f8fbfe; }
tbody tr:hover td,
table tr:hover td {
    background: #eef7fd;
    transition: background .12s ease;
}

/* Mensajes con un poco más de presencia. */
.alert-ok,
.aviso-ok,
.ok {
    box-shadow: inset 4px 0 0 #22a45a;
}
.alert-error,
.aviso-error,
.err {
    box-shadow: inset 4px 0 0 #E5007E;
}
.aviso-desplazar {
    border: 1px solid #c5daf0;
    box-shadow: inset 4px 0 0 #2586c7;
}

/* Bloques técnicos y de servicio. */
body .bloque:not(.bloque-epson),
body .tarea,
body .historial {
    border-color: #bed8ef;
    background: linear-gradient(135deg, #f5faff 0%, #ffffff 75%);
    box-shadow: inset 4px 0 0 #2b76c3;
}
body .hoja-header {
    border-top: 4px solid #168ab6;
}

/* Clientes / Comercial: verdes y violetas para separar visualmente. */
body .ventas-alta {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 76%);
    border-color: #b9e8ca;
    box-shadow: inset 5px 0 0 var(--verde-vivo);
}
body .ventas-filtros,
body .buscador-clientes {
    background: linear-gradient(135deg, #eff8ff 0%, #ffffff 80%);
    border-color: #c5def2;
}
body .contacto-card,
body .detalle-bloque {
    border-color: #d9ccf5;
    background: linear-gradient(135deg, #faf7ff 0%, #ffffff 76%);
    box-shadow: inset 4px 0 0 var(--violeta-vivo);
}
body .chip {
    background: #eef2ff;
    color: #5840a8;
    border: 1px solid #d8d5ff;
}
body .etiqueta,
body .etiqueta-vinculado {
    background: #ecfdf3;
    color: #167044;
    border-color: #b7e8c9;
}

/* Epson: azul Epson + amarillo de atención. */
body .bloque-epson {
    border-color: #79bce2;
    background: linear-gradient(135deg, #eaf7ff 0%, #ffffff 80%);
    box-shadow: inset 5px 0 0 #1594cf;
}
body .kpi-caso {
    border: 1px solid #c9deed;
    box-shadow: 0 6px 14px rgba(7,89,133,.08);
}
body .kpi-caso:not(.kpi-abierto):not(.kpi-resuelto) {
    background: linear-gradient(135deg, #eaf6fd, #ffffff);
}

/* Compras: color ámbar para distinguir el módulo. */
body .oc-panel {
    background: linear-gradient(135deg, #fff8e8 0%, #ffffff 78%);
    border-color: #efd79f;
    box-shadow: inset 5px 0 0 #d59b1c;
}
body .oc-tabs a {
    background: #fff3cf;
    border: 1px solid #efd38a;
    border-radius: 8px;
    padding: 6px 10px;
    color: #875b00;
}

/* Gastos / viáticos: naranja cálido. */
body .viaje-card,
body .form-card {
    border-color: #f2cfb4;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 78%);
    box-shadow: inset 5px 0 0 var(--naranja-vivo), 0 7px 18px rgba(154,72,20,.06);
}
body .total-chip {
    background: #fff4e7;
    border-color: #f3d2b7;
    color: #92400e;
}

/* Capacitaciones: turquesa. */
body .cap-form,
body .cap-dia-lista {
    border-color: #b7ded8;
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 80%);
    box-shadow: inset 5px 0 0 var(--turquesa-vivo);
}
body .cap-grid {
    border-color: #badfd9;
    box-shadow: 0 8px 20px rgba(15,118,110,.08);
}
body .cap-dow {
    background: linear-gradient(180deg, #def7f2, #d2eee9);
    color: #0f665f;
}

/* Prevención: rojo para alerta + naranja para atención. */
body .prev-top,
body .prev-tabla {
    border-color: #f0c6c0;
}
body .prev-kpi {
    background: linear-gradient(135deg, #fff5f3 0%, #ffffff 78%);
    border-color: #f3c8c1;
    box-shadow: inset 5px 0 0 #d94737, 0 7px 16px rgba(185,28,28,.06);
}
body .prev-kpi:nth-child(even) {
    background: linear-gradient(135deg, #fff8ed 0%, #ffffff 78%);
    border-color: #efd6b6;
    box-shadow: inset 5px 0 0 #e67e22, 0 7px 16px rgba(194,65,12,.05);
}

/* Usuarios / permisos: violeta y gris azulado. */
body .permisos-box,
body .permisos-grupo,
body .permiso-item {
    border-color: #d7cff0;
    background: linear-gradient(135deg, #faf8ff 0%, #ffffff 82%);
}
body .permisos-grupo { box-shadow: inset 4px 0 0 #554596; }

/* KPI: tarjetas deliberadamente distintas para lectura rápida. */
body .kpi-grid .kpi,
body .kpis .kpi {
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 7px 16px rgba(24,58,91,.07);
}
body .kpi-grid .kpi:nth-child(6n+1),
body .kpis .kpi:nth-child(6n+1) {
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border-color: #bfdbfe;
    box-shadow: inset 5px 0 0 #009FE3, 0 7px 16px rgba(37,99,235,.06);
}
body .kpi-grid .kpi:nth-child(6n+1) strong,
body .kpis .kpi:nth-child(6n+1) strong { color:#1d4ed8; }
body .kpi-grid .kpi:nth-child(6n+2),
body .kpis .kpi:nth-child(6n+2) {
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    border-color: #bbf7d0;
    box-shadow: inset 5px 0 0 #16a34a, 0 7px 16px rgba(22,163,74,.06);
}
body .kpi-grid .kpi:nth-child(6n+2) strong,
body .kpis .kpi:nth-child(6n+2) strong { color:#009985; }
body .kpi-grid .kpi:nth-child(6n+3),
body .kpis .kpi:nth-child(6n+3) {
    background: linear-gradient(135deg, #faf5ff, #ffffff);
    border-color: #e9d5ff;
    box-shadow: inset 5px 0 0 #554596, 0 7px 16px rgba(124,58,237,.06);
}
body .kpi-grid .kpi:nth-child(6n+3) strong,
body .kpis .kpi:nth-child(6n+3) strong { color:#554596; }
body .kpi-grid .kpi:nth-child(6n+4),
body .kpis .kpi:nth-child(6n+4) {
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border-color: #fed7aa;
    box-shadow: inset 5px 0 0 #ea580c, 0 7px 16px rgba(234,88,12,.06);
}
body .kpi-grid .kpi:nth-child(6n+4) strong,
body .kpis .kpi:nth-child(6n+4) strong { color:#ED6B0D; }
body .kpi-grid .kpi:nth-child(6n+5),
body .kpis .kpi:nth-child(6n+5) {
    background: linear-gradient(135deg, #ecfeff, #ffffff);
    border-color: #a5f3fc;
    box-shadow: inset 5px 0 0 #0891b2, 0 7px 16px rgba(8,145,178,.06);
}
body .kpi-grid .kpi:nth-child(6n+5) strong,
body .kpis .kpi:nth-child(6n+5) strong { color:#0e7490; }
body .kpi-grid .kpi:nth-child(6n),
body .kpis .kpi:nth-child(6n) {
    background: linear-gradient(135deg, #fdf2f8, #ffffff);
    border-color: #fbcfe8;
    box-shadow: inset 5px 0 0 #E5007E, 0 7px 16px rgba(190,24,93,.06);
}
body .kpi-grid .kpi:nth-child(6n) strong,
body .kpis .kpi:nth-child(6n) strong { color:#9d174d; }

/* Gráficos e informes con cabeceras más claras. */
body .grafico {
    border-color: #cfdeec;
    box-shadow: 0 8px 20px rgba(15,76,129,.08);
}
body .grafico h2 {
    padding-bottom: 8px;
    border-bottom: 3px solid #dbeafe;
}

/* Detalles interactivos y pequeñas tarjetas. */
details {
    border-radius: 11px;
}
details > summary {
    color: #174a7e;
}

@media (max-width: 780px) {
    .section-title,
    .titulo-seccion,
    .titulo-bloque { padding: 8px 10px 8px 14px; }
}

/* ===== Identidad visual Lumila 2.0 · 13/09/2026 ===== */
:root {
    --lumila-azul: #079bd3;
    --lumila-azul-oscuro: #123f6b;
    --lumila-magenta: #ec087d;
    --lumila-amarillo: #ffe719;
    --lumila-violeta: #7655d6;
    --lumila-verde: #19a974;
}

body:not(.dashboard-inicio):not(.login-fondo):not(.portal-cliente) {
    background:
        radial-gradient(circle at 4% 4%, rgba(7,155,211,.13), transparent 25%),
        radial-gradient(circle at 96% 3%, rgba(236,8,125,.09), transparent 23%),
        radial-gradient(circle at 86% 96%, rgba(255,231,25,.10), transparent 25%),
        linear-gradient(145deg,#edf7fc 0%,#f8f7fd 54%,#fffaf0 100%);
}

body:not(.dashboard-inicio):not(.portal-cliente) > .container > .card:first-child,
body:not(.dashboard-inicio):not(.portal-cliente) .container-wide > .card:first-child {
    position: relative;
    border: 1px solid rgba(132,165,191,.28);
    border-top: 5px solid var(--lumila-azul);
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(20,63,102,.11);
}

body:not(.dashboard-inicio):not(.portal-cliente) > .container > .card:first-child::after,
body:not(.dashboard-inicio):not(.portal-cliente) .container-wide > .card:first-child::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 18px;
    top: 0;
    width: 88px;
    height: 5px;
    background: linear-gradient(90deg,var(--lumila-magenta),var(--lumila-amarillo));
    border-radius: 0 0 8px 8px;
}

body:not(.dashboard-inicio) h1 {
    color: var(--lumila-azul-oscuro);
    letter-spacing: -.45px;
    font-weight: 800;
}

body:not(.dashboard-inicio) h2 {
    color: #15517f;
    letter-spacing: -.2px;
}

body:not(.dashboard-inicio) h3 { color: #27648f; }

body:not(.dashboard-inicio) .card {
    border-radius: 18px;
    border-color: rgba(151,177,199,.34);
    box-shadow: 0 10px 27px rgba(28,65,98,.09);
}

body:not(.dashboard-inicio) fieldset,
body:not(.dashboard-inicio) details,
body:not(.dashboard-inicio) .grupo,
body:not(.dashboard-inicio) .panel {
    border: 1px solid #cddfeb;
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,248,253,.92));
    box-shadow: 0 7px 18px rgba(25,66,101,.06);
}

body:not(.dashboard-inicio) legend,
body:not(.dashboard-inicio) details > summary {
    color: var(--lumila-azul-oscuro);
    font-weight: 800;
}

body:not(.dashboard-inicio) label {
    color: #234f72;
    letter-spacing: .05px;
}

body:not(.dashboard-inicio) input,
body:not(.dashboard-inicio) select,
body:not(.dashboard-inicio) textarea {
    border: 1px solid #c2d7e6;
    border-radius: 11px;
    background: linear-gradient(180deg,#fff,#fbfdff);
    transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

body:not(.dashboard-inicio) input:focus,
body:not(.dashboard-inicio) select:focus,
body:not(.dashboard-inicio) textarea:focus {
    border-color: var(--lumila-azul);
    box-shadow: 0 0 0 4px rgba(7,155,211,.13),0 7px 16px rgba(20,80,117,.07);
}

body:not(.dashboard-inicio) button:not(.btn-danger):not(.boton-eliminar):not(.quitar):not(.boton-light),
body:not(.dashboard-inicio) .boton,
body:not(.dashboard-inicio) a.boton {
    border-radius: 11px;
    background: linear-gradient(135deg,var(--lumila-azul-oscuro),var(--lumila-azul));
    box-shadow: 0 7px 15px rgba(7,126,176,.22);
}

body:not(.dashboard-inicio) button:not(.btn-danger):not(.boton-eliminar):not(.quitar):not(.boton-light):hover,
body:not(.dashboard-inicio) .boton:hover,
body:not(.dashboard-inicio) a.boton:hover {
    background: linear-gradient(135deg,#0b3159,#087fae);
    box-shadow: 0 10px 19px rgba(7,126,176,.28);
}

body:not(.dashboard-inicio) .boton-light {
    border-radius: 11px;
    background: linear-gradient(180deg,#fff,#eaf5fc);
    border-color: #b8d8e9;
    color: #0c6090;
    box-shadow: 0 4px 10px rgba(20,74,108,.07);
}

body:not(.dashboard-inicio) table {
    border: 1px solid #c9ddea;
    border-radius: 14px;
    box-shadow: 0 8px 21px rgba(25,65,97,.08);
}

body:not(.dashboard-inicio) th {
    background: linear-gradient(135deg,#164b76,#087fae) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.16) !important;
    font-weight: 800;
}

body:not(.dashboard-inicio) td {
    border-color: #dce8f0;
}

body:not(.dashboard-inicio) tbody tr:nth-child(even) td {
    background: #f6fbfe;
}

body:not(.dashboard-inicio) tbody tr:hover td {
    background: #e9f7fd !important;
}

body:not(.dashboard-inicio) .alert-ok,
body:not(.dashboard-inicio) .aviso-ok {
    border-radius: 13px;
    background: linear-gradient(135deg,#eafaf3,#f8fffb);
    border-color: #aee3ca;
    box-shadow: inset 5px 0 0 var(--lumila-verde),0 7px 16px rgba(25,169,116,.08);
}

body:not(.dashboard-inicio) .alert-error,
body:not(.dashboard-inicio) .aviso-error {
    border-radius: 13px;
    background: linear-gradient(135deg,#fff0f4,#fffafa);
    border-color: #f1bdcb;
    box-shadow: inset 5px 0 0 var(--lumila-magenta),0 7px 16px rgba(204,20,100,.08);
}

body:not(.dashboard-inicio) .badge,
body:not(.dashboard-inicio) .chip,
body:not(.dashboard-inicio) .estado {
    border-radius: 999px;
}

body:not(.dashboard-inicio) ::-webkit-scrollbar { width:11px;height:11px; }
body:not(.dashboard-inicio) ::-webkit-scrollbar-track { background:#e8f1f7;border-radius:10px; }
body:not(.dashboard-inicio) ::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#61bddd,#1684b1);border-radius:10px;border:2px solid #e8f1f7; }

/* Regreso uniforme y visible al inicio del sistema */
body:not(.dashboard-inicio) a[href="dashboard.php"],
body:not(.dashboard-inicio) .menu-principal-global {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #d86f00 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#ff9f1c,#f17600) !important;
    color: #fff !important;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 7px 16px rgba(218,105,0,.25) !important;
    transition: transform .16s ease,box-shadow .16s ease,filter .16s ease;
}

body:not(.dashboard-inicio) a[href="dashboard.php"]:hover,
body:not(.dashboard-inicio) .menu-principal-global:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(218,105,0,.32) !important;
}

.menu-principal-global {
    position: fixed;
    z-index: 1000;
    top: 16px;
    right: 18px;
}

.semaforo-seguimiento {
    display: block;
    width: max-content;
    max-width: 190px;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}
.semaforo-verde{background:#dcfce7;color:#166534}
.semaforo-amarillo{background:#fef3c7;color:#92400e}
.semaforo-naranja{background:#ffedd5;color:#ED6B0D}
.semaforo-rojo{background:#fee2e2;color:#E5007E;box-shadow:0 0 0 3px rgba(185,28,28,.10)}
.semaforo-cerrado{background:#e2e8f0;color:#555555}

.seguimientos-por-cliente{display:grid;gap:11px;margin-top:16px}
.cliente-seguimiento{overflow:hidden;border:1px solid #cddfec;border-radius:15px;background:#fff;box-shadow:0 6px 16px rgba(30,64,99,.07)}
.cliente-seguimiento>summary{display:grid;grid-template-columns:18px minmax(180px,1.4fr) minmax(170px,1fr) auto;gap:12px;align-items:center;padding:11px 15px;cursor:pointer;list-style:none;background:linear-gradient(135deg,#f8fcff,#eef7fc)}
.cliente-seguimiento>summary::-webkit-details-marker{display:none}
.cliente-seguimiento[open]>summary{border-bottom:1px solid #cddfec;background:linear-gradient(135deg,#eaf6fd,#f8fbff)}
.cliente-nombre{font-size:17px;font-weight:900;color:#174b78}.cliente-conteo{color:#526b80;font-weight:700}.cliente-alerta{display:flex;align-items:center}.circulo-prioridad{display:block;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 4px rgba(15,23,42,.06)}.circulo-prioridad.semaforo-verde{background:#22c55e}.circulo-prioridad.semaforo-amarillo{background:#eab308}.circulo-prioridad.semaforo-naranja{background:#f97316}.circulo-prioridad.semaforo-rojo{background:#E5007E}.circulo-prioridad.semaforo-cerrado{background:#94a3b8}.cliente-abrir{font-weight:800;color:#087faf;white-space:nowrap}
.temas-cliente{display:grid;gap:9px;padding:10px;background:#f6f9fc}.tema-seguimiento{padding:11px;border:1px solid #d8e4ed;border-radius:11px;background:#fff}.tema-cab{display:flex;justify-content:space-between;gap:10px}.tema-cab strong{display:block;color:#174b78;font-size:15px}.tema-cab small{display:block;margin-top:3px;color:#64788a}.tema-datos{display:grid;grid-template-columns:minmax(135px,.65fr) repeat(3,minmax(165px,1fr));gap:7px;margin-top:8px}.tema-datos>div{padding:7px 9px;border-radius:8px;background:#f6f9fc}.tema-datos b,.tema-datos span{display:block}.tema-datos b{margin-bottom:3px;color:#375d79;font-size:11px;text-transform:uppercase}.tema-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:8px}.acciones-compactas{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.acciones-compactas br{display:none}.acciones-compactas a{font-weight:800}.adjuntos-compacto .adjuntos-compactos{max-width:none}
@media(max-width:900px){.cliente-seguimiento>summary{grid-template-columns:18px 1fr auto}.cliente-conteo{grid-column:2}.cliente-abrir{grid-column:3;grid-row:1}.tema-datos{grid-template-columns:1fr 1fr}}

.dato-vencidos{text-decoration:none;transition:.18s ease}.dato-vencidos span{margin-left:9px;font-weight:800;color:#087faf}.dato-vencidos:hover,.dato-vencidos.activo{background:#fff3d9;box-shadow:0 0 0 2px #f59e0b;color:#163b68}
@media(max-width:600px){
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
    .seguimientos-por-cliente{gap:7px;margin-top:10px}
    .cliente-seguimiento{border-radius:11px}
    .cliente-seguimiento>summary{grid-template-columns:16px minmax(0,1fr) auto;gap:8px;padding:9px 10px;min-height:48px}
    .cliente-nombre{font-size:15px;line-height:1.15;overflow-wrap:anywhere}
    .cliente-conteo{grid-column:2;font-size:12px;line-height:1.15}
    .cliente-abrir{grid-column:3;grid-row:1;font-size:0}
    .cliente-abrir::after{content:'Ver ▾';font-size:14px}
    .circulo-prioridad{width:12px;height:12px;box-shadow:0 0 0 3px rgba(15,23,42,.06)}
    .tema-datos{grid-template-columns:1fr}
    .tema-pie{align-items:stretch;flex-direction:column}
    .acciones-compactas{width:100%}.acciones-compactas a{flex:1;text-align:center}
    .cliente-alerta .semaforo-seguimiento{max-width:160px}
}

/* Opción de visibilidad dentro de la ficha de una marca */
.marca-visibilidad-tareas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #cbdff0;
    border-radius: 12px;
    background: linear-gradient(135deg,#eef5ff,#f8fbff);
}

.marca-visibilidad-tareas label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}

.marca-visibilidad-tareas input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

@media(max-width:780px){
    body:not(.dashboard-inicio) > .container > .card:first-child,
    body:not(.dashboard-inicio) .container-wide > .card:first-child{border-radius:16px}
    body:not(.dashboard-inicio) .card{border-radius:15px}
    body:not(.dashboard-inicio) h1{font-size:24px}
    .marca-visibilidad-tareas{align-items:stretch;flex-direction:column}
    .marca-visibilidad-tareas button{width:100%}
    .menu-principal-global{top:10px;right:10px;min-height:36px!important;padding:7px 12px!important}
}

/* Adaptación móvil común para las pantallas internas del sistema. */
@media (max-width: 720px) {
    body { padding: 8px; overflow-x: hidden; }
    .container, .container-wide, .container-equipamiento { width: 100%; max-width: 100%; }
    .card { padding: 13px; margin-bottom: 12px; }
    .topbar { align-items: stretch; flex-direction: column; gap: 10px; }
    .topbar > a, .topbar > button { align-self: flex-start; }
    .grid { grid-template-columns: 1fr !important; }
    input, select, textarea, button { max-width: 100%; }
    input[type="file"] { width: 100%; font-size: 14px; overflow: hidden; }
    fieldset { min-width: 0; }
    .tabla-scroll-superior { display: none !important; }
    .tabla-scroll-inferior { overflow: visible; }

    table.tabla-movil { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
    table.tabla-movil thead, table.tabla-movil > tbody > tr:first-child:has(th) { display: none; }
    table.tabla-movil tbody { display: grid; gap: 10px; width: 100%; }
    table.tabla-movil tr { display: block; overflow: hidden; width: 100%; border: 1px solid #cddfec; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(30,64,99,.06); }
    table.tabla-movil td { display: grid; grid-template-columns: minmax(95px,34%) minmax(0,1fr); gap: 8px; width: 100%; min-width: 0 !important; padding: 8px 10px !important; border: 0 !important; border-bottom: 1px solid #e5edf3 !important; background: #fff !important; white-space: normal !important; overflow-wrap: anywhere; text-align: left !important; }
    table.tabla-movil td:last-child { border-bottom: 0 !important; }
    table.tabla-movil td::before { content: attr(data-label); color: #174b78; font-size: 12px; font-weight: 800; }
    table.tabla-movil td[colspan] { display: block; }
    table.tabla-movil td[colspan]::before { display: none; }
    table.tabla-movil td form { min-width: 0 !important; width: 100%; }
    table.tabla-movil td button, table.tabla-movil td a { max-width: 100%; }
}

/* Identidad Lumila: se carga también en pantallas sin estilos.css desde app.php. */
/* Lumila: tipografias de marca. Agregar al final de estilos.css. */
@font-face {
  font-family: 'Lumila DIN';
  src: url('../fonts/din-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lumila Ubuntu';
  src: url('../fonts/Ubuntu-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
body,
body :is(p, li, dt, dd, label, input, textarea, select, button, table, th, td, nav, div, span, a, strong, em, small, summary, details, legend, caption, .btn, .boton) {
  font-family: 'Lumila DIN', Arial, sans-serif !important;
}
body :is(h1, h2, h3, h4, h5, h6),
body :is(h1, h2, h3, h4, h5, h6) :is(span, a, strong, em) {
  font-family: 'Lumila Ubuntu', Ubuntu, Arial, sans-serif !important;
  font-weight: 700 !important;
}


/* Lumila · manual de marca. Archivos originales, sin deformaciones. */

:root{
 --lumila-magenta:#E5007E;--lumila-cian:#009FE3;--lumila-amarillo:#FFEC00;
 --lumila-negro:#000000;--lumila-violeta:#554596;--lumila-verde:#009985;--lumila-naranja:#ED6B0D;
 --color-ok:var(--lumila-verde);--color-error:var(--lumila-magenta);
 --color-primario-hover:var(--lumila-violeta);--sombra:0 8px 24px #0000000d;
 --azul-vivo:var(--lumila-cian);--celeste-vivo:var(--lumila-cian);
}
body{font-family:'Lumila DIN',Arial,sans-serif!important;background:var(--color-fondo,#f7f7f7)!important;color:var(--color-texto,#000)!important}
body :is(h1,h2,h3,h4,h5,h6,.sector-titulo,.menu-titulo){font-family:'Lumila Ubuntu',Arial,sans-serif!important;font-weight:700!important}
a{color:var(--color-primario,#554596)}
body::before,body::after{background-image:none!important}
.card,.topbar,.menu-card,.menu-bloque,.portal-barra,.login-card,.acceso-card{background:var(--color-card,#fff)!important;border-color:var(--color-borde,#ddd)!important}
body :is(.boton,.btn,button,.menu-principal-global){background-image:none!important}
body :is(.boton,.btn,.btn-primary,button[type=submit]){background-color:var(--apariencia-boton,#e5007e)!important;color:var(--apariencia-boton-texto,#000)!important}
body :is(.boton-secundario,.btn-secondary){background:var(--apariencia-secundario,#009985)!important;color:var(--apariencia-secundario-texto,#000)!important}
body :is(.boton-light,.btn-light){background:var(--color-card,#fff)!important;color:var(--color-primario,#554596)!important;border:1px solid var(--color-borde,#ddd)!important}
body :is(.btn-danger,.boton-danger,.boton-eliminar,.boton-eliminar-adjunto,.quitar,[data-danger]){background:var(--lumila-magenta)!important;color:#000!important}
:focus-visible{outline:3px solid var(--lumila-violeta);outline-offset:3px}
input:focus,textarea:focus,select:focus{border-color:var(--lumila-violeta)!important;box-shadow:0 0 0 3px #55459622!important}
body :is(table th,.tabla th){background:var(--apariencia-tabla,#554596)!important;color:var(--apariencia-tabla-texto,#fff)!important}
body :is(.alert-ok,.alert-success,.estado-ok,.badge-success){background:#e5f5f1!important;color:#000!important;border-color:var(--lumila-verde)!important;border-left:4px solid var(--lumila-verde)!important}
body :is(.alert-error,.alert-danger,.badge-danger){background:#fce5f2!important;color:#000!important;border-color:var(--lumila-magenta)!important;border-left:4px solid var(--lumila-magenta)!important}
body :is(.alert-warning,.aviso,.badge-warning){background:var(--lumila-amarillo)!important;color:#000!important;border-color:var(--lumila-amarillo)!important}
body :is(.alert-info,.badge-info){background:#e5f5fc!important;color:#000!important;border-color:var(--lumila-cian)!important}
body.dashboard-inicio{background-image:none!important}
.dashboard-inicio :is(.menu-subgrupo,.menu-icono){background-image:none!important}
.dashboard-inicio .subgrupo-verde,.dashboard-inicio .subgrupo-turquesa{background:var(--lumila-verde)!important;border-color:var(--lumila-verde)!important;color:#000!important}
.dashboard-inicio .subgrupo-naranja{background:var(--lumila-naranja)!important;border-color:var(--lumila-naranja)!important;color:#000!important}
.dashboard-inicio .subgrupo-rojo{background:var(--lumila-magenta)!important;border-color:var(--lumila-magenta)!important;color:#000!important}
.dashboard-inicio .subgrupo-violeta{background:var(--lumila-violeta)!important;border-color:var(--lumila-violeta)!important;color:#fff!important}
.dashboard-inicio .subgrupo-amarillo{background:var(--lumila-amarillo)!important;border-color:var(--lumila-amarillo)!important;color:#000!important}
.dashboard-inicio .sector-capacitaciones{--area:var(--lumila-cian);--area-texto:#000}
.dashboard-inicio .sector-prevencion{--area:var(--lumila-amarillo);--area-texto:#000}
img[data-lumila-marca],img[src*='/logos/lumila-horizontal'],img[src*='/logos/lumila-negativo']{object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;filter:none!important;box-shadow:none!important}
img[data-lumila-marca]{width:140px!important;height:80px!important;max-width:100%!important;flex:0 0 auto!important}
body :is(.login-logo,.acceso-logo)[data-lumila-marca]{width:210px!important;height:120px!important}
img[data-lumila-variante=simbolo]{width:48px!important;height:48px!important;max-width:48px!important}
img[data-lumila-variante=circular]{width:80px!important;height:80px!important;max-width:80px!important}
@media(max-width:650px){img[data-lumila-marca]{width:110px!important;height:63px!important}img[data-lumila-variante=simbolo]{width:44px!important;height:44px!important;max-width:44px!important}.lumila-encabezado-identidad{gap:10px}}
@media print{body{background:#fff!important;color:#000!important}img[data-lumila-marca]{object-fit:contain!important}.card{box-shadow:none!important}}


.dashboard-inicio .menu-card:has(.icono-azul){--tarjeta-color:var(--lumila-cian)}
.icono-azul{--icono-color:var(--lumila-cian);--icono-fondo:color-mix(in srgb,var(--lumila-cian) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-celeste){--tarjeta-color:var(--lumila-cian)}
.icono-celeste{--icono-color:var(--lumila-cian);--icono-fondo:color-mix(in srgb,var(--lumila-cian) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-violeta){--tarjeta-color:var(--lumila-violeta)}
.icono-violeta{--icono-color:var(--lumila-violeta);--icono-fondo:color-mix(in srgb,var(--lumila-violeta) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-verde){--tarjeta-color:var(--lumila-verde)}
.icono-verde{--icono-color:var(--lumila-verde);--icono-fondo:color-mix(in srgb,var(--lumila-verde) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-naranja){--tarjeta-color:var(--lumila-naranja)}
.icono-naranja{--icono-color:var(--lumila-naranja);--icono-fondo:color-mix(in srgb,var(--lumila-naranja) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-rojo){--tarjeta-color:var(--lumila-magenta)}
.icono-rojo{--icono-color:var(--lumila-magenta);--icono-fondo:color-mix(in srgb,var(--lumila-magenta) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-turquesa){--tarjeta-color:var(--lumila-verde)}
.icono-turquesa{--icono-color:var(--lumila-verde);--icono-fondo:color-mix(in srgb,var(--lumila-verde) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-indigo){--tarjeta-color:var(--lumila-violeta)}
.icono-indigo{--icono-color:var(--lumila-violeta);--icono-fondo:color-mix(in srgb,var(--lumila-violeta) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-amarillo){--tarjeta-color:var(--lumila-amarillo)}
.icono-amarillo{--icono-color:var(--lumila-amarillo);--icono-fondo:color-mix(in srgb,var(--lumila-amarillo) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-fucsia){--tarjeta-color:var(--lumila-magenta)}
.icono-fucsia{--icono-color:var(--lumila-magenta);--icono-fondo:color-mix(in srgb,var(--lumila-magenta) 12%,white)}

.dashboard-inicio .menu-card:has(.icono-gris){--tarjeta-color:var(--lumila-negro)}
.icono-gris{--icono-color:var(--lumila-negro);--icono-fondo:color-mix(in srgb,var(--lumila-negro) 12%,white)}

.dashboard-inicio .menu-card strong{color:var(--color-texto,#000)!important}
.dashboard-inicio .menu-card{border-top-color:var(--area,var(--tarjeta-color))!important}