/* =====================================================
   Gestor de Arte · Rediseño Glassmorphic Bento
   Estética: Mesa de dibujo digital con compartimentos (Bento Box)
   y paneles de vidrio esmerilado (Glassmorphism).
   Tipografía: Albert Sans (UI/Lectura) + Instrument Serif (Display).
   Paleta: Frosted Studio Slate & Cobalt Blue (Gris estudio con azul cobalto).
   ===================================================== */

:root, [data-tema="claro"] {
    --fondo: #f3f4f6;           /* Slate floor */
    --superficie: rgba(255, 255, 255, 0.7);     /* Frosted white glass */
    --superficie-2: rgba(243, 244, 246, 0.8);   /* Layered frosted container */
    --borde: rgba(228, 231, 235, 0.6);          /* Frosted edge */
    --texto: #111827;           /* Slate-900 */
    --texto-mudo: #6b7280;      /* Slate-500 */
    --acento: #2563eb;          /* Cobalt Blue */
    --acento-tinta: #ffffff;
    --acento-hover: #1d4ed8;
    --peligro: #dc2626;         /* Emerald and ruby markers */
    --ok: #059669;
    --alerta: #d97706;          
    
    --fuente-display: 'Instrument Serif', Georgia, serif;
    --fuente-sans: 'Albert Sans', system-ui, -apple-system, sans-serif;
    
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 16px;
    --radio-pill: 9999px;
    
    --sombra: 0 4px 30px rgba(0, 0, 0, 0.03);
    --sombra-lg: 0 10px 40px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02);
    --sombra-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
    --inset-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    
    --blur: blur(12px);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-tema="oscuro"] {
    --fondo: #08080a;           /* Obsidian deep black floor */
    --superficie: rgba(22, 20, 24, 0.65);       /* Frosted dark glass */
    --superficie-2: rgba(28, 28, 35, 0.8);
    --borde: rgba(255, 255, 255, 0.08);          /* Edge illumination */
    --texto: #f9fafb;           /* Silver ink */
    --texto-mudo: #9ca3af;
    --acento: #3b82f6;          /* Vibrant electric blue */
    --acento-tinta: #08080a;
    --acento-hover: #2563eb;
    --peligro: #ef4444;
    --ok: #10b981;
    --alerta: #f59e0b;
    
    --sombra: 0 4px 30px rgba(0, 0, 0, 0.3);
    --sombra-lg: 0 20px 50px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
    --sombra-focus: 0 0 0 3px rgba(59, 130, 246, 0.25);
    --inset-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- Reset & Base ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-sans);
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--acento);
    text-decoration: none;
    transition: color 150ms var(--ease-out);
}

a:hover {
    color: var(--acento-hover);
}

/* Headers */
h1, h2, h3, h4 {
    font-family: var(--fuente-display);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: normal;
}

h1 {
    font-size: 2.2rem;
    font-style: italic;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--borde);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 1.4rem;
    margin: 1.5rem 0 0.5rem;
}

h4 {
    font-size: 1.15rem;
}

/* Icons styling */
i.ph {
    display: inline-flex;
    align-self: center;
    font-size: 1.15em;
    vertical-align: middle;
}

/* ---------- Layout & Navigation ---------- */
.app {
    display: flex;
    min-height: 100vh;
}

.principal {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contenido {
    padding: 2.5rem 2rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Sidebar */
.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-right: 1px solid var(--borde);
    box-shadow: var(--inset-brillo), var(--sombra);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 30;
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--borde);
}

.marca-icono {
    color: var(--acento);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}

.marca-texto {
    font-family: var(--fuente-display);
    font-size: 1.6rem;
    font-weight: 500;
    font-style: italic;
    color: var(--texto);
}

.menu {
    padding: 1.25rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radio-md);
    color: var(--texto);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 150ms var(--ease-out), color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.menu a i {
    font-size: 1.25em;
    color: var(--texto-mudo);
    transition: color 150ms var(--ease-out);
}

.menu a:hover {
    background: var(--superficie-2);
    text-decoration: none;
}

.menu a:hover i {
    color: var(--texto);
}

.menu a:active {
    transform: scale(0.98);
}

.menu a.activo {
    background: var(--acento);
    color: var(--acento-tinta);
    box-shadow: var(--inset-brillo), var(--sombra);
    font-weight: 600;
}

.menu a.activo i {
    color: var(--acento-tinta);
}

/* Sidebar Footer */
.sidebar-pie {
    padding: 1.25rem;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.usuario-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.usuario-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radio-pill);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    color: var(--texto);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.usuario-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.usuario-info strong {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usuario-info span {
    font-size: 0.75rem;
    color: var(--texto-mudo);
}

.btn-salir {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--texto-mudo);
    transition: color 150ms var(--ease-out);
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-salir:hover {
    color: var(--peligro);
    text-decoration: none;
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--inset-brillo), var(--sombra);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-titulo {
    font-family: var(--fuente-display);
    font-size: 2rem;
    font-style: italic;
    font-weight: 500;
    flex: 1;
    color: var(--texto);
}

.btn-menu {
    display: none;
}

.btn-tema, .btn-menu {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--texto);
    font-size: 1.1rem;
    transition: background 150ms var(--ease-out), transform 100ms var(--ease-out);
}

.btn-tema:hover, .btn-menu:hover {
    background: var(--superficie-2);
}

.btn-tema:active, .btn-menu:active {
    transform: scale(0.95);
}

/* ---------- Bento Dashboard Cards ---------- */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.tarjeta {
    grid-column: span 4;
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: 1.5rem;
    box-shadow: var(--inset-brillo), var(--sombra);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: var(--inset-brillo), var(--sombra-lg);
}

.tarjeta-num {
    font-family: var(--fuente-sans);
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--texto);
}

.tarjeta-lbl {
    color: var(--texto-mudo);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 0.5rem;
}

/* Bento grid sizing rules (5 items) */
.tarjetas > .tarjeta:nth-child(1) { grid-column: span 6; }
.tarjetas > .tarjeta:nth-child(2) { grid-column: span 6; }
.tarjetas > .tarjeta:nth-child(3) { grid-column: span 4; }
.tarjetas > .tarjeta:nth-child(4) { grid-column: span 4; }
.tarjetas > .tarjeta:nth-child(5) { grid-column: span 4; }

/* Bento grid sizing rules (4 items - e.g. project view) */
.tarjetas > .tarjeta:first-child:nth-last-child(4) {
    grid-column: span 6;
}
.tarjetas > .tarjeta:first-child:nth-last-child(4) ~ .tarjeta {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .tarjetas > .tarjeta {
        grid-column: span 6 !important;
    }
}
@media (max-width: 640px) {
    .tarjetas > .tarjeta {
        grid-column: span 12 !important;
    }
}

.tarjeta-alerta {
    border-left: 4px solid var(--alerta);
}

.tarjeta-ok {
    border-left: 4px solid var(--ok);
}

/* ---------- Panels ---------- */
.panel {
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: 2rem;
    box-shadow: var(--inset-brillo), var(--sombra);
    margin-bottom: 1.5rem;
}

.panel-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.panel-cab h2 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.panel-form {
    max-width: 860px;
    margin: 0 auto;
}

/* ---------- Tables ---------- */
.tabla-envoltura {
    overflow-x: auto;
    border-radius: var(--radio-md);
    border: 1px solid var(--borde);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: left;
}

.tabla th {
    padding: 0.75rem 1rem;
    color: var(--texto-mudo);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--superficie-2);
    border-bottom: 1px solid var(--borde);
}

.tabla td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
    color: var(--texto);
}

.tabla tr:last-child td {
    border-bottom: none;
}

.fila-enlace {
    cursor: pointer;
    transition: background-color 120ms var(--ease-out);
}

.fila-enlace:hover td {
    background-color: var(--superficie-2);
}

.celda-acciones {
    white-space: nowrap;
    text-align: right;
}

.vacio {
    color: var(--texto-mudo);
    text-align: center;
    padding: 2rem !important;
    font-style: italic;
}

.mudo {
    color: var(--texto-mudo);
    font-size: 0.8rem;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radio-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-borrador {
    background: var(--superficie-2);
    color: var(--texto-mudo);
    border-color: var(--borde);
}

.badge-solicitado {
    background: rgba(37, 99, 235, 0.1);
    color: #1e40af;
    border-color: rgba(37, 99, 235, 0.2);
}

.badge-en_diseno {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.2);
}

.badge-esperando_aprobacion {
    background: rgba(217, 119, 6, 0.1);
    color: var(--alerta);
    border-color: rgba(217, 119, 6, 0.2);
}

.badge-cambios_solicitados {
    background: rgba(220, 38, 38, 0.1);
    color: var(--peligro);
    border-color: rgba(220, 38, 38, 0.2);
}

.badge-aprobado {
    background: rgba(5, 150, 105, 0.1);
    color: var(--ok);
    border-color: rgba(5, 150, 105, 0.2);
}

.badge-completado {
    background: rgba(5, 150, 105, 0.2);
    color: var(--ok);
    border-color: rgba(5, 150, 105, 0.3);
}

.badge-version {
    background: var(--superficie-2);
    color: var(--texto);
    border-color: var(--borde);
}

.prio-baja {
    background: var(--superficie-2);
    color: var(--texto-mudo);
}

.prio-media {
    background: rgba(37, 99, 235, 0.1);
    color: #1e40af;
}

.prio-alta {
    background: rgba(217, 119, 6, 0.12);
    color: var(--alerta);
}

.prio-urgente {
    background: var(--peligro);
    color: #ffffff;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    border-radius: var(--radio-md);
    padding: 0.6rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
    white-space: nowrap;
}

.btn i {
    font-size: 1.1em;
}

.btn:hover {
    text-decoration: none;
    background-color: var(--superficie-2);
    border-color: var(--texto-mudo);
}

.btn:active {
    transform: scale(0.97);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--sombra-focus);
}

.btn-primario {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--acento-tinta);
    box-shadow: var(--inset-brillo), var(--sombra);
}

.btn-primario:hover {
    background: var(--acento-hover);
    border-color: var(--acento-hover);
}

.btn-secundario {
    background: var(--superficie-2);
    border-color: var(--borde);
}

.btn-secundario:hover {
    background: var(--borde);
}

.btn-peligro {
    background: var(--peligro);
    border-color: var(--peligro);
    color: #ffffff;
}

.btn-peligro:hover {
    filter: brightness(0.9);
}

.btn-fantasma {
    border: none;
    background: none;
    color: var(--texto-mudo);
    padding: 0.5rem 0.75rem;
}

.btn-fantasma:hover {
    background: var(--superficie-2);
    color: var(--texto);
}

.btn-mini {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--radio-sm);
}

.btn-bloque {
    width: 100%;
}

.inline {
    display: inline;
}

.select-mini {
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    border-radius: var(--radio-sm);
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
}

/* ---------- Forms ---------- */
label {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto);
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    background: var(--superficie-2);
    color: var(--texto);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 400;
    transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: var(--sombra-focus);
    background: var(--superficie);
}

.check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    cursor: pointer;
}

.check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--acento);
}

.form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

.form-acciones {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.fila-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    align-items: flex-end;
}

.fila-form select {
    margin-top: 0;
    max-width: 380px;
}

.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.filtros input, .filtros select {
    margin-top: 0;
}

/* ---------- Flash Messages ---------- */
.flash {
    padding: 0.85rem 1.25rem;
    border-radius: var(--radio-md);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: rgba(5, 150, 105, 0.1);
    color: var(--ok);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.flash-error {
    background: rgba(220, 38, 38, 0.1);
    color: var(--peligro);
    border-color: rgba(220, 38, 38, 0.2);
}

/* ---------- Login Page ---------- */
.pagina-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 39px, var(--borde) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, var(--borde) 39px 40px),
        var(--fondo);
}

.login-caja {
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--inset-brillo), var(--sombra-lg);
    position: relative;
}

.login-caja::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 4px;
    background: var(--acento);
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}

.marca-login {
    padding: 0;
    border: none;
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.login-sub {
    color: var(--texto-mudo);
    font-size: 0.88rem;
    margin-bottom: 2rem;
}

/* ---------- Projects Grid ---------- */
.cuadricula-proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.tarjeta-proyecto {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--acento);
    border-radius: var(--radio-md);
    padding: 1.5rem;
    color: var(--texto);
    box-shadow: var(--inset-brillo), var(--sombra);
    transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.tarjeta-proyecto:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--inset-brillo), var(--sombra-lg);
}

.tp-cab {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.tp-cab h3 {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-cliente {
    color: var(--texto-mudo);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.tp-meta {
    font-size: 0.8rem;
    color: var(--texto-mudo);
    margin-top: auto;
}

.tp-acciones {
    display: block;
    margin-top: 1rem;
}

.proyecto-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.proyecto-cab-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.miga {
    font-family: var(--fuente-sans);
    color: var(--texto-mudo);
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.miga a {
    color: var(--texto-mudo);
}

.miga a:hover {
    color: var(--texto);
}

/* ---------- Tabs Navigation ---------- */
.pestanas {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 2rem;
    overflow-x: auto;
}

.pestanas a {
    padding: 0.75rem 0.25rem;
    color: var(--texto-mudo);
    font-weight: 500;
    font-size: 0.92rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.pestanas a:hover {
    text-decoration: none;
    color: var(--texto);
}

.pestanas a.activo {
    color: var(--acento);
    border-bottom-color: var(--acento);
    font-weight: 600;
}

/* ---------- Request Detail Page ---------- */
.detalle-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.detalle-badges {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.detalle-acciones {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.detalle-2col {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 2rem;
    align-items: start;
}

.especificaciones {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 1.25rem;
    font-size: 0.9rem;
}

.especificaciones dt {
    color: var(--texto-mudo);
    font-weight: 600;
    text-align: right;
}

.especificaciones dd {
    color: var(--texto);
}

.texto-largo {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.form-subida {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--borde);
}

.form-subida input[type=file] {
    margin-bottom: 1rem;
    border: 1px solid var(--borde);
    padding: 0.5rem;
    border-radius: var(--radio-md);
    background: var(--superficie-2);
    cursor: pointer;
}

.bloque-version {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    background: var(--superficie);
    box-shadow: var(--inset-brillo), var(--sombra);
    transition: border-color 150ms var(--ease-out);
}

.bloque-version.version-actual {
    border-color: var(--acento);
    background: rgba(37, 99, 235, 0.02);
}

.bloque-version h4 {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lista-archivos {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lista-archivos li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie-2);
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.archivo-icono {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
}

.archivo-nombre {
    font-weight: 600;
    flex: 1;
    min-width: 150px;
}

.panel-aprobacion {
    border-left: 4px solid var(--alerta);
}

.lista-historial {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lista-historial li {
    padding: 0.85rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    background: var(--superficie-2);
    font-size: 0.88rem;
}

.lista-historial li .mudo {
    display: block;
    margin-top: 0.25rem;
}

/* ---------- Comments Section ---------- */
.hilo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comentario {
    background: var(--superficie-2);
    border-radius: var(--radio-md);
    padding: 1rem 1.25rem;
    font-size: 0.92rem;
    max-width: 85%;
    border-left: 2px solid transparent;
}

.comentario.propio {
    align-self: flex-end;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--acento);
}

.comentario-cab {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.comentario-cab strong {
    color: var(--texto);
    font-size: 0.88rem;
}

.form-comentario textarea {
    margin-bottom: 0.75rem;
}

.lista-actividad {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.lista-actividad li {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--borde);
    font-size: 0.88rem;
}

.lista-actividad li:last-child {
    border-bottom: none;
}

/* ---------- HTML Dialog Modals ---------- */
.modal {
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    background: var(--superficie);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--texto);
    padding: 2rem;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--inset-brillo), var(--sombra-lg);
    margin: auto;
    
    /* Animation Starting States */
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), display 220ms allow-discrete, overlay 220ms allow-discrete;
}

.modal[open] {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    .modal[open] {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Exit transition state */
.modal.cerrando {
    opacity: 0 !important;
    transform: scale(0.96) !important;
}

.modal::backdrop {
    background: rgba(8, 8, 10, 0);
    backdrop-filter: blur(0px);
    transition: background 220ms var(--ease-out), backdrop-filter 220ms var(--ease-out), display 220ms allow-discrete, overlay 220ms allow-discrete;
}

.modal[open]::backdrop {
    background: rgba(8, 8, 10, 0.4);
    backdrop-filter: blur(8px);
}

@starting-style {
    .modal[open]::backdrop {
        background: rgba(8, 8, 10, 0);
        backdrop-filter: blur(0px);
    }
}

.modal.cerrando::backdrop {
    background: rgba(8, 8, 10, 0) !important;
    backdrop-filter: blur(0px) !important;
}

.modal h3 {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-style: italic;
}

.modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 900px) {
    .detalle-2col {
        grid-template-columns: 1fr;
    }
    .form-2col {
        grid-template-columns: 1fr;
    }
    .contenido {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 760px) {
    .sidebar {
        position: fixed;
        z-index: 50;
        left: -260px;
        transition: left 250ms var(--ease-out);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    }
    .sidebar.abierta {
        left: 0;
    }
    .btn-menu {
        display: grid;
    }
    .contenido {
        padding: 1.25rem 1rem;
    }
}