/* =====================================================================
   JM Consultoría Fiscal — Hoja de estilos principal
   ===================================================================== */

:root {
    /* Paleta de marca: logo personal Jorge Medina (carbón + dorado) */
    --marino:       #17150f;   /* carbón cálido (sustituye al antiguo marino) */
    --marino-osc:   #0a0a08;
    --marino-claro: #4a4336;   /* gris cálido para acentos */
    --oro:          #c9a45c;   /* dorado del logo */
    --oro-claro:    #e7d3a1;
    --oro-osc:      #9c7c3a;
    /* Alias para no romper reglas existentes */
    --verde:        #c9a45c;
    --verde-osc:    #9c7c3a;
    --gris-osc:     #0e0e0c;   /* fondo del sidebar */
    --fondo:        #F5F4F0;
    --tarjeta:      #FFFFFF;
    --texto:        #1f1d18;
    --texto-sec:    #7a7468;
    --urgente:      #DC2626;
    --exito:        #16A34A;
    --adv:          #d99425;
    --azul:         #4a4336;
    --radio:        10px;
    --sombra:       0 4px 20px rgba(20,16,8,0.08);
    --sidebar-ancho:260px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
    font-family: 'Inter', Calibri, 'Segoe UI', sans-serif;
    background: var(--fondo);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.55;
}

a { text-decoration: none; color: inherit; }

/* ===================== LAYOUT ===================== */
.layout { display: flex; min-height: 100vh; }

.contenido {
    flex: 1;
    margin-left: var(--sidebar-ancho);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===================== SIDEBAR ===================== */
.sidebar {
    width: var(--sidebar-ancho);
    background: var(--gris-osc);
    color: #e5e5e5;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-logo {
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logo-marca { width: 104px; max-width: 62%; height: auto; display: block; }
.logo-jm {
    background: var(--oro);
    color: var(--marino);
    font-weight: 700;
    font-size: 22px;
    padding: 8px 12px;
    border-radius: var(--radio);
    letter-spacing: 1px;
}
/* Logo real (SVG) en el sidebar y login */
.logo-img { width: 46px; height: 46px; border-radius: 10px; display: block; }
.logo-texto { font-size: 14px; font-weight: 600; color: #fff; }

.sidebar-nav { flex: 1; padding: 14px 0; overflow-y: auto; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    color: #cfcfcf;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.nav-item i { width: 18px; text-align: center; font-size: 15px; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.activo {
    background: rgba(212,175,55,0.16);
    color: #fff;
    border-left-color: var(--oro);
}
.nav-item.activo i { color: var(--oro); }
.nav-item .badge {
    margin-left: auto;
    background: var(--urgente);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 0 6px;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.usuario-info { display: flex; flex-direction: column; margin-bottom: 12px; }
.usuario-info strong { color: #fff; font-size: 14px; }
.usuario-info small { color: #9ca3af; font-size: 12px; }
.btn-logout {
    display: block;
    text-align: center;
    background: rgba(220,38,38,0.15);
    color: #fca5a5;
    padding: 9px;
    border-radius: var(--radio);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.btn-logout:hover { background: var(--urgente); color: #fff; }

/* ===================== TOPBAR ===================== */
.topbar {
    background: var(--tarjeta);
    box-shadow: var(--sombra);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar h1 { font-size: 19px; font-weight: 600; flex: 1; }
.topbar-fecha { color: var(--texto-sec); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.menu-toggle {
    display: none;
    background: none; border: none;
    font-size: 20px; color: var(--gris-osc); cursor: pointer;
}

/* ===================== MAIN ===================== */
.main { padding: 28px; flex: 1; position: relative; }
/* Marca de agua con el logotipo en el fondo del área de contenido */
.main::before {
    content: '';
    position: fixed;
    top: 0; bottom: 0; right: 0; left: var(--sidebar-ancho);
    background: url('../img/escudo.png') center center no-repeat;
    background-size: 360px auto;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
.main > * { position: relative; z-index: 1; }

.footer { text-align: center; padding: 18px; color: var(--texto-sec); font-size: 12px; }

/* ===================== TARJETAS ===================== */
.card {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
}
.card h2 { font-size: 16px; margin-bottom: 16px; color: var(--texto); }

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radio);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
    flex-shrink: 0;
}
.stat-icon.verde   { background: var(--verde); }
.stat-icon.azul    { background: var(--azul); }
.stat-icon.adv     { background: var(--adv); }
.stat-icon.urgente { background: var(--urgente); }
.stat-info .num { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat-info .lbl { font-size: 13px; color: var(--texto-sec); }

.seccion-titulo { font-size: 16px; font-weight: 600; margin: 6px 0 14px; }
.dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }

/* ===================== TABLAS ===================== */
.tabla-wrap { overflow-x: auto; }
table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.tabla th, table.tabla td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid #eef0f4;
}
table.tabla th {
    color: var(--texto-sec);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
table.tabla tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: #fafbfc; }

/* ===================== BADGES DE ESTATUS ===================== */
.badge-estatus {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.est-pagada       { background: #dcfce7; color: #166534; }
.est-presentada   { background: #dbeafe; color: #1e40af; }
.est-pendiente    { background: #fef3c7; color: #92400e; }
.est-con_saldo    { background: #fae8ff; color: #86198f; }
.est-extemporanea { background: #fee2e2; color: #991b1b; }

.badge-tipo {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radio);
    font-size: 12px;
    font-weight: 600;
    background: #f4ecda;
    color: var(--marino-claro);
}

/* ===================== AVISOS ===================== */
.aviso {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    border-left: 4px solid var(--azul);
    margin-bottom: 12px;
}
.aviso.tipo-info    { border-left-color: var(--azul); }
.aviso.tipo-alerta  { border-left-color: var(--adv); }
.aviso.tipo-urgente { border-left-color: var(--urgente); }
.aviso.no-leido { background: #fffdf3; }
.aviso-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.aviso-cab h3 { font-size: 15px; flex: 1; }
.aviso-fecha { font-size: 12px; color: var(--texto-sec); }
.aviso-mensaje { font-size: 14px; color: #444; }
.punto-no-leido { width: 9px; height: 9px; background: var(--verde); border-radius: 50%; }

/* ===================== BOTONES ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--radio);
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.btn-primario { background: var(--marino); color: #fff; }
.btn-primario:hover { background: var(--marino-claro); }
.btn-oro { background: var(--oro); color: var(--marino); }
.btn-oro:hover { background: var(--oro-osc); color: #fff; }
.btn-sec { background: #eef0f4; color: var(--texto); }
.btn-sec:hover { background: #e2e5eb; }
.btn-peligro { background: var(--urgente); color: #fff; }
.btn-peligro:hover { opacity: .9; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-descarga { background: #f4ecda; color: var(--marino-claro); }
.btn-descarga:hover { background: var(--marino); color: #fff; }

/* ===================== FORMULARIOS ===================== */
.form-grupo { margin-bottom: 16px; }
.form-grupo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #374151; }
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: var(--radio);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.20);
}
.form-grupo textarea { resize: vertical; min-height: 90px; }

/* Campo de contraseña con botón de ver/ocultar (ojito) */
.campo-password { position: relative; }
.campo-password input { padding-right: 44px; }
.ver-pass {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 7px;
    color: var(--texto-sec); font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.ver-pass:hover { color: var(--marino); background: #f1efe9; }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===================== MENSAJES ===================== */
.mensaje {
    padding: 12px 16px;
    border-radius: var(--radio);
    font-size: 14px;
    margin-bottom: 18px;
}
.mensaje-error  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.mensaje-exito  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.mensaje-info   { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ===================== LOGIN ===================== */
.login-body {
    min-height: 100vh;
    background: radial-gradient(130% 120% at 50% 0%, #1c1a14 0%, #0a0a08 58%, #000000 100%);
    padding: 40px 16px;
    position: relative;
    overflow: hidden;
}
/* Logo grande detrás de la página, tipo espejo / cristal */
.login-body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(640px, 92vw);
    height: min(640px, 92vw);
    transform: translate(-50%, -50%);
    background: url('../img/escudo-claro.png') center/contain no-repeat;
    opacity: 0.08;
    filter: blur(1.2px) drop-shadow(0 0 70px rgba(205,178,128,0.35));
    pointer-events: none;
    z-index: 0;
}
.login-card {
    position: relative;
    z-index: 1;
    background: rgba(18, 17, 13, 0.52);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    backdrop-filter: blur(22px) saturate(125%);
    border: 1px solid rgba(205, 178, 128, 0.22);
    width: 100%;
    max-width: min(400px, calc(100vw - 32px));
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 36px 32px;
    box-sizing: border-box;
}
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo .logo-jm { font-size: 30px; padding: 12px 18px; display: inline-block; }
.login-logo h1 { font-size: 18px; margin-top: 14px; color: #f4f1ea; }
.login-logo p { font-size: 13px; color: #b9b3a6; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.login-pie { text-align: center; font-size: 12px; color: #8a847a; margin-top: 20px; }
.login-admin-link { text-align:center; margin-top:14px; font-size:13px; }
.login-admin-link a { color: var(--verde-osc); font-weight: 600; }

.dato-perfil { display:flex; flex-direction:column; gap:4px; padding:12px 0; border-bottom:1px solid #eef0f4; }
.dato-perfil .lbl { font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:var(--texto-sec); }
.dato-perfil .val { font-size:15px; font-weight:500; }

.vacio { text-align:center; color:var(--texto-sec); padding:30px; font-size:14px; }

.filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.filtros a { padding:7px 14px; border-radius:20px; background:#fff; box-shadow:var(--sombra); font-size:13px; font-weight:600; color:var(--texto-sec); }
.filtros a.activo { background:var(--verde); color:#fff; }

/* ===================== ADMIN ===================== */
.admin .sidebar { background: var(--marino-osc); }
.tabla-acciones { display:flex; gap:6px; }
.pill-activo  { color: var(--exito); font-weight:600; }
.pill-inactivo{ color: var(--urgente); font-weight:600; }

.stat-icon.marino { background: var(--marino); }
.stat-icon.oro    { background: var(--oro); color: var(--marino); }

/* ===================== MOSAICO DE APARTADOS (dashboard) ===================== */
.apartados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.apartado-tile {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 3px solid var(--oro);
    transition: transform .15s, box-shadow .15s;
}
.apartado-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(11,29,58,0.15); }
.apartado-tile .ico {
    width: 46px; height: 46px; border-radius: 10px;
    background: var(--marino); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.apartado-tile h3 { font-size: 15px; color: var(--marino); }
.apartado-tile .cnt { font-size: 13px; color: var(--texto-sec); margin-top: auto; }
.apartado-tile .cnt strong { color: var(--oro-osc); }

/* ===================== RECORDATORIOS ===================== */
.recordatorio {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    margin-bottom: 12px;
    border-left: 4px solid var(--marino-claro);
    display: flex; align-items: flex-start; gap: 14px;
}
.recordatorio.prio-alta  { border-left-color: var(--urgente); }
.recordatorio.prio-media { border-left-color: var(--adv); }
.recordatorio.prio-baja  { border-left-color: var(--marino-claro); }
.recordatorio.hecho { opacity: .55; }
.recordatorio .rec-ico { font-size: 18px; color: var(--marino-claro); margin-top: 2px; }
.recordatorio h3 { font-size: 15px; margin-bottom: 3px; }
.recordatorio p { font-size: 13px; color: #555; margin: 0; }
.rec-fecha { font-size: 12px; color: var(--texto-sec); margin-left: auto; white-space: nowrap; }
.badge-prio { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-prio.alta  { background:#fee2e2; color:#991b1b; }
.badge-prio.media { background:#fef3c7; color:#92400e; }
.badge-prio.baja  { background:#e0e7ff; color:#3730a3; }

/* ===================== NOTICIAS ===================== */
.noticia {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px 22px;
    margin-bottom: 14px;
    border-top: 3px solid var(--oro);
}
.noticia h3 { font-size: 16px; color: var(--marino); margin-bottom: 6px; }
.noticia .fecha { font-size: 12px; color: var(--texto-sec); margin-bottom: 8px; }
.noticia p { font-size: 14px; color: #444; margin-bottom: 8px; }
.noticia a.leer { font-size: 13px; font-weight: 600; color: var(--marino-claro); }

/* ===================== SUBCARPETAS POR MES ===================== */
.mes-folder {
    background: var(--tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    margin-bottom: 14px;
    border-left: 4px solid var(--oro);
}
.mes-folder > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--marino);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mes-folder > summary::-webkit-details-marker { display: none; }
.mes-folder > summary i { color: var(--oro-osc); }
.mes-folder > summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    margin-left: auto; font-size: 12px; color: var(--texto-sec); transition: transform .15s;
}
.mes-folder[open] > summary::after { transform: rotate(180deg); }
.mes-count {
    background: #f1efe9; color: var(--texto-sec);
    font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 10px;
}

/* ===================== TARJETAS DE DOCUMENTO ===================== */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
.doc-card {
    background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra);
    padding: 16px; display: flex; gap: 12px; align-items: flex-start;
}
.doc-card .doc-ico {
    width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
    background: #f4ecda; color: var(--marino); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.doc-card .doc-info { flex: 1; min-width: 0; }
.doc-card .doc-info h4 { font-size: 14px; color: var(--marino); margin-bottom: 3px; word-break: break-word; }
.doc-card .doc-info .meta { font-size: 12px; color: var(--texto-sec); margin-bottom: 8px; }

/* ===================== RESPONSIVE ===================== */
/* Tablet y móvil: sidebar deslizable con overlay */
@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.3);
    }
    .sidebar.abierto { transform: translateX(0); }
    .contenido { margin-left: 0; }
    .main::before { left: 0; background-size: 280px auto; }
    .menu-toggle { display: block; }
    .dos-columnas { grid-template-columns: 1fr; }
    .form-fila { grid-template-columns: 1fr; }
    .main { padding: 18px; }
    .topbar { padding: 14px 18px; }
    .topbar h1 { font-size: 17px; }
    /* Capa oscura detrás del sidebar abierto */
    .overlay-sidebar {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 90;
    }
    .overlay-sidebar.activo { display: block; }
}

/* Móvil chico */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .main { padding: 14px; }
    .topbar { padding: 12px 14px; gap: 10px; }
    .topbar-fecha { display: none; }            /* se oculta la fecha por espacio */
    .grid-cards { grid-template-columns: 1fr; gap: 14px; }
    .apartados-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .apartado-tile { padding: 16px 12px; }
    .apartado-tile h3 { font-size: 14px; }
    .docs-grid { grid-template-columns: 1fr; }
    .card { padding: 18px 16px; }
    .login-card { padding: 28px 22px; max-width: 100%; min-width: 0; }
    .stat-info .num { font-size: 20px; }
    .recordatorio { flex-wrap: wrap; }
    .rec-fecha { margin-left: 0; }
    table.tabla th, table.tabla td { padding: 9px 10px; }
    .btn { padding: 9px 13px; }
}

/* Pantallas muy chicas: una sola columna de apartados */
@media (max-width: 360px) {
    .apartados-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   TEMA OSCURO — fondo negro + recuadros difuminados (vidrio) para
   resaltar el logotipo de fondo. (Portal y admin; el login no se toca.)
   ===================================================================== */
:root { --fondo: #0a0a08; }

.contenido { background: #0a0a08; }

/* Marca de agua: logotipo CLARO, más visible sobre el negro */
.main::before {
    background-image: url('../img/escudo-claro.png');
    background-size: 440px auto;
    opacity: 0.16;
}

/* Topbar translúcida */
.topbar {
    background: rgba(12,11,9,0.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(205,178,128,0.12);
    box-shadow: none;
}
.topbar h1 { color: #f4efe5; }
.topbar-fecha { color: #b9b1a0; }
.menu-toggle { color: #f4efe5; }

/* Recuadros difuminados (efecto vidrio) */
.card, .stat-card, .apartado-tile, .doc-card, .mes-folder,
.aviso, .recordatorio, .noticia {
    background: rgba(32,29,22,0.42);
    backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
    border: 1px solid rgba(205,178,128,0.16);
    box-shadow: 0 8px 30px rgba(0,0,0,0.38);
    color: #e9e4d9;
}
.card h2, .apartado-tile h3, .doc-card .doc-info h4, .noticia h3,
.recordatorio h3, .seccion-titulo { color: #f4efe5; }
.stat-info .num { color: #f4efe5; }
.card p, .stat-info .lbl, .apartado-tile .cnt, .doc-card .meta,
.aviso-mensaje, .recordatorio p, .noticia p, .noticia .fecha { color: #b9b1a0; }
.apartado-tile .cnt strong { color: var(--oro-claro); }
.vacio { color: #8f8775; }

/* Íconos de las tarjetas en tono oro translúcido */
.apartado-tile .ico, .stat-icon.marino { background: rgba(205,178,128,0.18); color: var(--oro-claro); }
.doc-card .doc-ico { background: rgba(205,178,128,0.16); color: var(--oro-claro); }

/* Subcarpetas de mes */
.mes-folder > summary { color: #f4efe5; }
.mes-folder > summary::after { color: #b9b1a0; }
.mes-count { background: rgba(255,255,255,0.10); color: #d7cfbd; }

/* Tablas en oscuro */
table.tabla th { color: #b9b1a0; border-bottom-color: rgba(255,255,255,0.12); }
table.tabla td { color: #e6e1d6; border-bottom-color: rgba(255,255,255,0.07); }
table.tabla tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Botones */
.btn-descarga { background: rgba(205,178,128,0.16); color: var(--oro-claro); }
.btn-descarga:hover { background: var(--oro); color: #1a1813; }
.btn-sec { background: rgba(255,255,255,0.09); color: #e9e4d9; }
.btn-sec:hover { background: rgba(255,255,255,0.16); }

/* Formularios (admin/perfil) sobre tarjetas oscuras */
.form-grupo label { color: #d7cfbd; }
.form-grupo input, .form-grupo select, .form-grupo textarea {
    background: rgba(255,255,255,0.06); border-color: rgba(205,178,128,0.22); color: #f1ece1;
}
.form-grupo input::placeholder { color: #8f8775; }
.dato-perfil { border-bottom-color: rgba(255,255,255,0.08); }
.dato-perfil .val { color: #ece7dc; }
.filtros a { background: rgba(32,29,22,0.5); color: #c9c0ae; }

/* Footer */
.footer { color: #8f8775; }

/* =====================================================================
   LOGIN tipo CRISTAL: tarjeta oscura translúcida, texto claro y campos
   translúcidos con borde dorado tenue.
   ===================================================================== */
.login-card .form-grupo label { color: #e8e4da; font-weight: 600; }
.login-card .form-grupo input {
    background: rgba(255,255,255,0.06) !important;
    color: #f5f3ee !important;
    border-color: rgba(205,178,128,0.30) !important;
    -webkit-text-fill-color: #f5f3ee;   /* iOS/Safari */
}
.login-card .form-grupo input:focus {
    border-color: rgba(205,178,128,0.65) !important;
    background: rgba(255,255,255,0.09) !important;
}
.login-card .form-grupo input::placeholder { color: #9a948a !important; -webkit-text-fill-color:#9a948a; }
.login-card .ver-pass { color: #cdb280; }
.login-card .ver-pass:hover { color: #ffffff; background: rgba(255,255,255,0.08); }

/* Autocompletado del navegador (Chrome/Edge): quitar el fondo azul/amarillo
   luminoso y dejarlo oscuro, acorde a la tarjeta de cristal. */
.login-card .form-grupo input:-webkit-autofill,
.login-card .form-grupo input:-webkit-autofill:hover,
.login-card .form-grupo input:-webkit-autofill:focus,
.login-card .form-grupo input:-webkit-autofill:active {
    -webkit-text-fill-color: #f5f3ee !important;
    -webkit-box-shadow: 0 0 0 1000px #16140f inset !important;
    box-shadow: 0 0 0 1000px #16140f inset !important;
    caret-color: #f5f3ee;
    border: 1px solid rgba(205,178,128,0.30) !important;
    transition: background-color 99999s ease-in-out 0s;
}
.login-card .form-grupo input:-webkit-autofill:focus {
    border-color: rgba(205,178,128,0.65) !important;
}