/* ========================================
   Design tokens — azul corporativo sobrio
   Para cambiar la paleta del sistema, tocar SOLO este bloque.
   ======================================== */
:root {
    --navy:          #0f2a4a;   /* header, encabezados de tabla */
    --navy-2:        #173a63;
    --primary:       #1e5aa8;   /* acciones principales */
    --primary-dark:  #164a8c;
    --primary-soft:  #e8f0fb;   /* fondos tenues de acento */
    --success:       #16a34a;   /* descargas / confirmaciones */
    --success-dark:  #15803d;
    --danger:        #dc2626;
    --danger-dark:   #b91c1c;
    --neutral:       #64748b;
    --neutral-dark:  #475569;

    --bg:            #f1f5f9;
    --surface:       #ffffff;
    --border:        #e2e8f0;
    --text:          #1e293b;
    --muted:         #64748b;

    --radius:        10px;
    --shadow-sm:     0 1px 3px rgba(15,42,74,0.08);
    --shadow-md:     0 4px 14px rgba(15,42,74,0.10);

    --header-h:      92px;      /* los sidebars sticky de las búsquedas usan esta var */
}

/* ========================================
   Global Styles
   ======================================== */
body {
    font-family: 'Roboto', Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    padding: 0;
    margin: 0;
}

.page-content {
    padding: 28px 32px;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ========================================
   Site Header
   ======================================== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
    color: #fff;
    padding: 0 28px;
    height: var(--header-h);
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(15,42,74,0.35);
    border-bottom: 3px solid var(--success);   /* guiño al verde de la marca */
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header__logo {
    height: 74px;
    width: auto;
    max-width: 220px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    padding: 4px 10px;
    border: none;
    box-shadow: none;
}

.site-header__title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    white-space: nowrap;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.site-header__nav-link {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: background 0.18s, color 0.18s;
}

.site-header__nav-link:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
}

/* Página actual */
.site-header__nav-link.is-active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 700;
    border-bottom-color: var(--success);
}

.site-header__user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.site-header__username {
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-header__badge {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.site-header__logout {
    padding: 6px 14px;
    font-size: 13px;
    margin-right: 0;
}

@media (max-width: 1100px) {
    .site-header__title { display: none; }
}

@media (max-width: 768px) {
    .site-header__nav { display: none; }
}

/* Headings */
h2 {
    margin-bottom: 20px;
    color: var(--navy);
}

/* Forms */
form {
    background: var(--surface);
    padding: 20px;
    border-radius: var(--radius);
    max-width: 500px;
}

/* Labels */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

/* Inputs */
input[type=text],
input[type=number],
input[type=email],
input[type=date],
input[type=password],
textarea,
select {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    box-sizing: border-box;
    font-size: 13.5px;
    background: #f8fafc;
    color: var(--text);
    font-family: 'Roboto', Arial, sans-serif;
    transition: border-color 0.18s, box-shadow 0.18s;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30,90,168,0.15);
    background: #fff;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    margin-right: 8px;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    vertical-align: middle;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-primary          { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.btn-primary:hover    { background: linear-gradient(135deg, #1a52a0 0%, #123f78 100%); }

.btn-secondary        { background: linear-gradient(135deg, var(--neutral) 0%, var(--neutral-dark) 100%); }
.btn-secondary:hover  { background: linear-gradient(135deg, #5a6b82 0%, #3b4757 100%); }

.btn-danger           { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%); }
.btn-danger:hover     { background: linear-gradient(135deg, #c92222 0%, #991b1b 100%); }

.btn-success          { background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%); }
.btn-success:hover    { background: linear-gradient(135deg, #139443 0%, #126a32 100%); }

/* Botón pequeño */
.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* Botón grande */
.btn-lg {
    padding: 11px 26px;
    font-size: 15px;
    border-radius: 9px;
}

/* Message boxes */
.message {
    margin-bottom: 15px;
    padding: 10px 14px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 8px 8px 0;
}

/* ========================================
   Tables
   ======================================== */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

table th,
table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

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

table th {
    background-color: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: none;
}

table tr:nth-child(even) td {
    background-color: #f8fafc;
}

table tr:hover td {
    background-color: var(--primary-soft);
}

table th a {
    color: #fff;
    text-decoration: none;
}

/* Top buttons container */
.top-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.top-buttons .btn {
    margin-right: 0;
}

/* Botones de acción en tablas - estilo outline pill */
table td .btn {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    margin-right: 5px;
    border: 2px solid transparent;
    box-shadow: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}

table td .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

table td .btn-primary           { background: transparent; border-color: var(--primary); color: var(--primary); }
table td .btn-primary:hover     { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: transparent; color: #fff; }

table td .btn-danger            { background: transparent; border-color: var(--danger); color: var(--danger); }
table td .btn-danger:hover      { background: linear-gradient(135deg, var(--danger), var(--danger-dark)); border-color: transparent; color: #fff; }

table td .btn-success           { background: transparent; border-color: var(--success); color: var(--success); }
table td .btn-success:hover     { background: linear-gradient(135deg, var(--success), var(--success-dark)); border-color: transparent; color: #fff; }

table td .btn-secondary         { background: transparent; border-color: var(--neutral); color: var(--neutral); }
table td .btn-secondary:hover   { background: linear-gradient(135deg, var(--neutral), var(--neutral-dark)); border-color: transparent; color: #fff; }

/* Search form full width */
.search-form {
    width: 100%;
    max-width: none;
    display: block;
}

/* make cards span wider if nested */
.card {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive minor tweaks */
@media (max-width: 500px) {
    form {
        width: 100%;
        padding: 15px;
    }
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}