@charset "UTF-8";

/* Contenedor con Scroll y Sombra Exterior */
.div_contenedor_tabla {
    overflow: auto;
    border-radius: 1rem;
    border: none;
    /* Bordes exteriores de la tabla con sombra suave */
    box-shadow:
            0 0 0 0.05rem rgba(255, 255, 255, 0.12),
            0 0.5rem 2rem -1rem rgba(0, 0, 0, 0.15);
    scrollbar-color: var(--color-azul) color-mix(in srgb, var(--color-azul) 25%, transparent);
}

/* ScrollBar del div */

/* Ancho del scrollbar */
.div_contenedor_tabla::-webkit-scrollbar {
    width:  4rem;
    height: 0.75rem;
}

/* Track (riel) */
.div_contenedor_tabla::-webkit-scrollbar-track {
    background:    color-mix(in srgb, var(--color-azul) 15%, transparent);
    border-radius: 99rem;
    box-shadow:
            inset 0 0 0.3rem  color-mix(in srgb, var(--color-carbon-deep) 60%, transparent),
            inset 0 0 0.08rem color-mix(in srgb, var(--color-azul) 20%, transparent);
}

.div_contenedor_tabla::-webkit-scrollbar-track:hover {
    background: color-mix(in srgb, var(--color-azul) 14%, transparent);
}

/* Thumb (el que se arrastra) */
.div_contenedor_tabla::-webkit-scrollbar-thumb {
    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--color-azul) 90%, white),
            var(--color-azul),
            color-mix(in srgb, var(--color-azul) 75%, var(--color-carbon-deep))
    );
    border-radius: 99rem;
    border:        0.18rem solid color-mix(in srgb, var(--color-azul) 15%, transparent);
    box-shadow:
            0 0 0.4rem  color-mix(in srgb, var(--color-azul) 45%, transparent),
            0 0 0.08rem color-mix(in srgb, var(--color-azul) 80%, transparent),
            inset 0 0.08rem 0.15rem rgba(255,255,255,0.18);
    transition:
            background   0.25s ease,
            box-shadow   0.25s ease,
            border-color 0.25s ease;
}

/* Thumb hover — glow más fuerte */
.div_contenedor_tabla::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--color-azul) 100%, white 20%),
            color-mix(in srgb, var(--color-azul) 85%, white),
            var(--color-azul)
    );
    border-color: color-mix(in srgb, var(--color-azul) 40%, transparent);
    box-shadow:
            0 0 0.7rem  color-mix(in srgb, var(--color-azul) 65%, transparent),
            0 0 0.2rem  color-mix(in srgb, var(--color-azul) 90%, transparent),
            0 0 1.2rem  color-mix(in srgb, var(--color-azul) 30%, transparent),
            inset 0 0.1rem 0.2rem rgba(255,255,255,0.28);
}

/* Thumb active (mientras se arrastra) */
.div_contenedor_tabla::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
            145deg,
            var(--color-azul),
            color-mix(in srgb, var(--color-azul) 60%, var(--color-carbon-deep))
    );
    box-shadow:
            0 0 1rem   color-mix(in srgb, var(--color-azul) 80%, transparent),
            0 0 0.3rem color-mix(in srgb, var(--color-azul) 100%, transparent),
            0 0 2rem   color-mix(in srgb, var(--color-azul) 40%, transparent),
            inset 0 0.08rem 0.12rem rgba(255,255,255,0.12);
    border-color: color-mix(in srgb, var(--color-azul) 60%, transparent);
}

/* Corner (esquina cuando hay scroll en ambos ejes) */
.div_contenedor_tabla::-webkit-scrollbar-corner {
    background: color-mix(in srgb, var(--color-azul) 5%, transparent);
}

/* ScrollBar del div */

/* === CORRECCIONES PRINCIPALES === */

/* 1. table-layout: fixed — distribución controlada de columnas */
table.table_hyperland {
    table-layout: fixed !important;
    width:        100% !important;
    border-collapse: separate; /* ¡Clave para que funcione el redondeado! */
    border-spacing: 0;
}

/* 2. Anchos proporcionales via colgroup (agregar al HTML también) */
table.table_hyperland colgroup col:nth-child(1) { width: 11%; } /* Titulo      */
table.table_hyperland colgroup col:nth-child(2) { width: 8%;  } /* Tipo        */
table.table_hyperland colgroup col:nth-child(3) { width: 39%; } /* Descripcion */
table.table_hyperland colgroup col:nth-child(4) { width: 10%; } /* Creado      */
table.table_hyperland colgroup col:nth-child(5) { width: 9%;  } /* Correr      */
table.table_hyperland colgroup col:nth-child(6) { width: 9%;  } /* Detalles    */
table.table_hyperland colgroup col:nth-child(7) { width: 9%;  } /* Editar      */

/* 3. th: salto de línea permitido (era nowrap antes) */
table.table_hyperland thead th {
    position: sticky;
    white-space: normal;
    word-break:  break-word;
    line-height: 1.3;
    border: none;
}

/* 4. td: sin max-width, con word-break para adaptarse */
table.table_hyperland tbody td {
    word-break:   break-word;
    overflow-wrap: break-word;
    white-space:  normal;
    /* SIN max-width, SIN overflow:hidden, SIN text-overflow:ellipsis */
}

/* 5. Fecha: nunca parte (es corta, no necesita) */
table.table_hyperland tbody td:nth-child(4) {
    white-space: nowrap;
}

/* 6. Celdas de accion: centradas y sin overflow */
table.table_hyperland tbody td.tdCenter {
    text-align:  center;
    white-space: nowrap;
}

/* ============================
   table_hyperland - Hyperland/macOS style
   Compatible con MaterializeCSS
   Sin px, sin border, sin top/height/width
   ============================ */

/* --- Tokens adaptativos por esquema --- */
@media (prefers-color-scheme: light) {
    :root {
        --hl-bg-table:    rgba(255,255,255,0.85);
        --hl-bg-thead:    rgba(38,50,56,0.06);
        --hl-bg-row:      rgba(255,255,255,0.6);
        --hl-bg-row-alt:  rgba(240,244,248,0.5);
        --hl-text:        #263238;
        --hl-th-text:     rgba(38,50,56,0.8);
        --hl-shadow-out:  rgba(38,50,56,0.10);
        --hl-shadow-mid:  rgba(38,50,56,0.06);
        --hl-glow:        rgba(0,200,83,0.18);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --hl-bg-table:    rgba(26,34,38,0.92);
        --hl-bg-thead:    rgba(255,255,255,0.04);
        --hl-bg-row:      rgba(38,50,56,0.55);
        --hl-bg-row-alt:  rgba(26,34,38,0.4);
        --hl-text:        #e8eff2;
        --hl-th-text:     rgba(232,239,242,0.7);
        --hl-shadow-out:  rgba(0,0,0,0.38);
        --hl-shadow-mid:  rgba(0,0,0,0.22);
        --hl-glow:        rgba(0,200,83,0.22);
    }
}

/* --- Contenedor wrapper (el div que envuelve la tabla) --- */
.table_hyperland_wrap {
    border-radius: 0.9rem;
    padding:       1%;
    overflow-x:    auto;
    box-shadow:
            0 0 0 0.0625rem color-mix(in srgb, var(--color-asfalto) 12%, transparent),
            0 0.5rem 2rem    var(--hl-shadow-out),
            0 0.125rem 0.5rem var(--hl-shadow-mid);
    transition: box-shadow 0.4s cubic-bezier(0.23,1,0.32,1);
}

.table_hyperland_wrap:hover {
    box-shadow:
            0 0 0 0.0625rem color-mix(in srgb, var(--color-verde) 35%, transparent),
            0 0.75rem 2.5rem var(--hl-shadow-out),
            0 0.25rem 1rem   var(--hl-glow);
}

/* --- Tabla principal --- */
table.table_hyperland {
    border-collapse: separate !important;
    border-spacing:  0 !important;
    background:      transparent !important;
    border-radius:   1rem;
    overflow:        hidden;
    /* Materialize: resets width a 100%, lo dejamos */
}

/* --- thead --- */

table.table_hyperland thead th {
    font-size:      0.9em !important;
    font-weight:    700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color:          var(--color-azul) !important;
    padding:        1.2% 1% !important;
    position:       sticky !important;
    background: color-mix(in srgb, var(--color-azul) 15%, transparent);
    box-shadow:
            inset 0 -0.0625rem 0 color-mix(in srgb, var(--color-verde) 14%, transparent),
            inset 0 -0.25rem 0.75rem color-mix(in srgb, var(--color-verde) 3%, transparent) !important;
    transition: color 0.2s;
}

/* separador vertical suave entre th */
table.table_hyperland thead th::after {
    content:    '';
    position:   absolute;
    right:      0;
    top:        25%;
    height:     50%;
    width:      0.0625rem;
    box-shadow: inset 0 -0.0625rem 0 color-mix(in srgb, var(--color-verde) 14%, transparent);
}
table.table_hyperland thead th:last-child::after { display: none; }

/* --- tbody filas --- */
table.table_hyperland tbody tr {
    transition: background 0.18s ease;
    cursor:     default;
}
table.table_hyperland tbody tr:nth-child(even) {
    background: var(--hl-bg-row-alt) !important;
}

/* hover fila (fuerza baja) */
table.table_hyperland tbody tr:hover {
    background: color-mix(in srgb, var(--hl-glow) 15%, transparent) !important;
    box-shadow: inset 0.5rem 0.225rem 0.5rem color-mix(in srgb, var(--color-azure) 25%, transparent) !important;
    cursor: pointer;
    border-radius: 4%;
}

/* --- celdas td --- */
table.table_hyperland tbody td {
    font-size:     0.8em !important;
    font-weight: bold;
    color:         var(--hl-text) !important;
    padding: 0.9% 0.9% !important;
    vertical-align: middle !important;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     20%;
    box-shadow: inset 0.4rem 0.1225rem 0.5rem
    color-mix(in srgb, var(--hl-bg-row) 20%, transparent) !important;
    transition:
            background 0.18s ease,
            box-shadow 0.22s ease,
            transform  0.08s;
    border-radius: 1%;
}

/* hover celda (fuerza alta) */
table.table_hyperland tbody td:hover {
    background: color-mix(in srgb, var(--color-verde) 12%, transparent) !important;
    box-shadow:
            inset 2rem 5.525rem 0 color-mix(in srgb, var(--hl-bg-row) 50%, transparent),
            inset 2rem 0.5rem 2.5rem color-mix(in srgb, var(--hl-bg-row) 75%, transparent) !important;
    border-radius: 7%;
}

/* click celda */
table.table_hyperland tbody td:active {
    background: color-mix(in srgb, var(--color-verde) 48%, transparent) !important;
    box-shadow:
            inset 0 -0.0625rem 0 color-mix(in srgb, var(--color-verde) 30%, transparent),
            inset 0 0 0.75rem    color-mix(in srgb, var(--color-verde) 22%, transparent) !important;
    transform: scale(0.993);
}

/* ripple al hacer click */
@keyframes hl-ripple {
    0%   { box-shadow: 0 0 0 0     color-mix(in srgb, var(--color-verde) 40%, transparent); }
    80%  { box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--color-verde) 0%,  transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
table.table_hyperland tbody td:active::after {
    content:       '';
    position:      absolute;
    inset:         0;
    pointer-events: none;
    animation:     hl-ripple 0.35s ease-out;
}

/* centrado */
table.table_hyperland tbody td.tdCenter { text-align: center; }

/* --- Botones / links dentro de celdas --- */
table.table_hyperland tbody td a {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         1.8% 2.2%;
    border-radius:   0.55rem;
    text-decoration: none;
    font-size:       1.7em;
    box-shadow: 0 0.0625rem 0.25rem color-mix(in srgb, var(--color-asfalto) 15%, transparent);
    transition:
            background 0.2s,
            box-shadow 0.2s,
            transform  0.15s;
}

table.table_hyperland tbody td a:hover {
    transform:  translateY(-0.12rem) scale(1.08);
    box-shadow: 0 0.25rem 0.75rem
    color-mix(in srgb, var(--color-asfalto) 22%, transparent);
}

table.table_hyperland tbody td a:active {
    transform:  scale(0.92);
    transition: transform 0.07s;
}

/* Variantes de color para links */
table.table_hyperland tbody td a.lbAzure {
    color:      var(--color-azure);
}
table.table_hyperland tbody td a.lbAzure:hover {
    box-shadow: 0 0.25rem 0.75rem
    color-mix(in srgb, var(--color-azure) 28%, transparent);
}

table.table_hyperland tbody td a.lbBlue {
    color:      var(--color-azul);
}
table.table_hyperland tbody td a.lbBlue:hover {
    box-shadow: 0 0.25rem 0.75rem
    color-mix(in srgb, var(--color-azul) 28%, transparent);
}

table.table_hyperland tbody td a.lbPurple {
    color:      var(--color-purpura);
}
table.table_hyperland tbody td a.lbPurple:hover {
    box-shadow: 0 0.25rem 0.75rem
    color-mix(in srgb, var(--color-purpura) 28%, transparent);
}