html, body {
    height: 100%;
    background: #1e3a8a; /* azul institucional normal */
}
/* Reset y base */
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#1e3a8a;color:#222}

/* Barra superior */
.navtop{background:#0033a0;color:#fff;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.navtop h1{margin:0;font-size:18px}
.navtop .btn-link{color:#ffcc00;text-decoration:none;margin-left:12px}

/* Contenedor principal */
.container{max-width:1100px;margin:20px auto;padding:0 16px}

/* Cards */
.card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06);margin-bottom:18px}

/* Formularios y auth */
.auth-box{width:360px;margin:60px auto;padding:22px;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.08);text-align:center}
.auth-box h1{margin:0 0 14px}
.input-group{display:flex;align-items:center;border:1px solid #eee;padding:8px;border-radius:6px;margin:8px 0}
.input-group i{margin:0 8px;color:#666}
.input-group input{border:0;outline:0;flex:1;padding:6px}
.btn{display:inline-block;background:#0033a0;color:#fff;padding:10px 18px;border-radius:8px;border:none;cursor:pointer}
.btn:hover{background:#002060}
.btn-danger{background:#e74c3c;color:#fff;padding:6px 10px;border-radius:6px;border:none;cursor:pointer}

/* ===============================
   TABLE – ESTILO ELEGANTE OSCURO
================================ */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
}

table thead th{
    background:#0f172a !important; /* azul noche oscuro */
    color:#ffffff !important;
    font-weight:600;
    padding:14px;
    font-size:14px;
    border-bottom:1px solid #1e293b;
}



td{
    padding:14px;
    font-size:14px;
    color:#1f2933;
    border-bottom:1px solid #e5e7eb;
}

/* filas alternadas */
tbody tr:nth-child(even){
    background:#f9fafb;
}

/* hover profesional */
tbody tr:hover{
    background:#eef2f7;
    transition: background 0.2s ease;
}

/* columna acciones centrada */
td.acciones{
    justify-content:center;
}


/* Flash */
.flash{padding:10px;border-radius:6px;margin-bottom:12px;font-weight:600}
.flash.success{background:#e9f7ef;color:#1e8b4b}
.flash.danger{background:#fff0f0;color:#c0392b}

/* Links / small */
.links{margin-top:10px}
.small{font-size:0.9em;color:#555}

/* Responsive */
@media(max-width:800px){
  .auth-box{width:92%;margin:30px auto}
  .container{padding:0 12px}
}

/* ===============================
   BOTONES GLASSMORPHISM PRO
================================ */

.acciones{
    display:flex;
    gap:10px;
}

/* base glass */
.btn-icon{
    width:40px;
    height:40px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    border:1px solid rgba(255,255,255,0.25);
}

/* EDITAR – glass oscuro elegante */
.btn-edit{
    background: rgba(44,62,80,0.15);
    color:#2c3e50;
}

.btn-edit:hover{
    background: rgba(44,62,80,0.85);
    color:#ffffff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(44,62,80,0.35);
}

/* ELIMINAR – glass vino fino */
.btn-delete{
    background: rgba(139,30,30,0.12);
    color:#8b1e1e;
}

.btn-delete:hover{
    background: rgba(139,30,30,0.9);
    color:#ffffff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(139,30,30,0.35);
}
/* ===== ENCABEZADO TABLA – AZUL NOCHE ===== */
table th{
    background-color:#0f172a !important;
    color:#ffffff !important;
}
.logo-cgd{
    height:150px;
    width:auto;
}
.container{
    background: transparent !important;
}
/* ===============================
   BOTÓN LOGIN – ESTILO PREMIUM
   (NO afecta otros botones)
================================ */

.auth-box .btn{
    width:100%;
    background: linear-gradient(135deg, #2563eb, #1e3a8a);
    color:#ffffff;
    padding:12px 16px;
    border:none;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(30,58,138,0.45);
}

/* Hover */
.auth-box .btn:hover{
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(30,58,138,0.55);
}

/* Click */
.auth-box .btn:active{
    transform: scale(0.97);
}
/* Links del login */
.auth-box .links a{
    color:#1e3a8a;
    font-weight:600;
    text-decoration:none;
    padding:6px 10px;
    border-radius:10px;
    transition: all 0.25s ease;
}

.auth-box .links a:hover{
    background:#e0e7ff;
    color:#1e40af;
}
/* ===== BOTÓN NEGRO ELEGANTE LOGIN / PASSWORD ===== */
.btn-dark{
    width:100%;
    background:#111;
    color:#fff;
    padding:12px;
    border:none;
    border-radius:12px;
    font-size:15px;
    cursor:pointer;
    font-weight:600;
    transition:all 0.25s ease;
}

.btn-dark:hover{
    background:#000;
    transform: translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

/* Inputs más elegantes en auth */
.auth-box .input-group{
    background:#f9fafb;
    border:1px solid #ddd;
    padding:12px;
    border-radius:10px;
    margin-bottom:14px;
}

.auth-box h1{
    margin-bottom:20px;
    font-size:22px;
    font-weight:700;
}