/*
 * ============================================================
 * HANNA Instruments — Design System
 * styles.css — Estilos base comunes a todas las páginas
 *
 * Tabla de contenidos:
 *   1.  Custom properties (tokens de diseño)
 *   2.  Reset y base
 *   3.  Tipografía
 *   4.  Navbar
 *   5.  Page header
 *   6.  Cards
 *   7.  Botones
 *   8.  Formularios (inputs, labels, selects, textareas)
 *   9.  Badges de estado
 *  10.  Fields de solo lectura
 *  11.  Alerts e info boxes
 *  12.  Footer
 *  13.  Loading overlay
 *  14.  Utilidades
 *  15.  Responsive
 *  16.  Print
 * ============================================================
 */


/* ── 1. Custom properties ─────────────────────────────────── */

:root {
    /* Paleta corporativa */
    --hi-blue:              #005eb8;
    --hi-blue-hover:        #1a7fd4;
    --hi-blue-active:       #004a93;
    --hi-blue-light:        #eff6ff;
    --hi-blue-border:       #bfdbfe;
    --hi-navy:              #0f1c2e;

    /* Fondos */
    --hi-bg:                #f0f4f8;
    --hi-surface:           #ffffff;

    /* Bordes */
    --hi-border:            #e8edf2;
    --hi-border-soft:       #f1f5f9;
    --hi-border-input:      #e2e8f0;

    /* Texto */
    --hi-text-primary:      #0f1c2e;
    --hi-text-secondary:    #475569;
    --hi-text-muted:        #64748b;
    --hi-text-placeholder:  #94a3b8;
    --hi-text-link:         #005eb8;

    /* Semánticos */
    --hi-success-bg:        #d1fae5;
    --hi-success-text:      #065f46;
    --hi-success-color:     #198754;
    --hi-warning-bg:        #fef3c7;
    --hi-warning-text:      #92400e;
    --hi-danger-bg:         #fee2e2;
    --hi-danger-text:       #991b1b;
    --hi-info-bg:           #dbeafe;
    --hi-info-text:         #1d4ed8;

    /* Tipografía */
    /*--hi-font-body:         'Barlow', system-ui, sans-serif;*/
    --hi-font-body:         Arial, Helvetica, sans-serif;
    --hi-font-display:      'Barlow Condensed', system-ui, sans-serif;

    /* Radios */
    --hi-radius-sm:         4px;
    --hi-radius-md:         6px;
    --hi-radius-lg:         10px;

    /* Sombras */
    --hi-shadow-navbar:     0 1px 0 var(--hi-border);
    --hi-shadow-focus:      0 0 0 3px rgba(0, 94, 184, .08);
    --hi-shadow-focus-ring: 0 0 0 3px rgba(0, 94, 184, .15);

    /* Espaciado de componentes */
    --hi-navbar-height:     58px;
    --hi-card-pad:          1rem 1.25rem;
    --hi-card-header-pad:   .75rem 1rem;
    --hi-btn-pad:           .65rem 1.1rem;
    --hi-btn-pad-sm:        .4rem .75rem;
    --hi-btn-pad-lg:        .875rem 1.5rem;
    --hi-input-pad:         .5rem .75rem;

    /* Transición global */
    --hi-transition:        .15s ease;
}


/* ── 2. Reset y base ──────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    font-family: var(--hi-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--hi-text-primary);
    background-color: var(--hi-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}


/* ── 3. Tipografía ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hi-font-display);
    font-weight: 700;
    color: var(--hi-text-primary);
}

a {
    color: var(--hi-text-link);
    text-decoration: none;
}

a:hover { text-decoration: underline; }


/* ── 4. Navbar ────────────────────────────────────────────── */

.hi-navbar {
    background-color: var(--hi-surface);
    box-shadow: var(--hi-shadow-navbar);
    height: var(--hi-navbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.hi-navbar__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hi-navbar__logo {
    display: block;
    height: 36px;
    width: auto;
}

.hi-navbar__right {
    display: flex;
    align-items: center;
}

.hi-navbar__divider {
    width: 1px;
    height: 22px;
    background-color: var(--hi-border-input);
    margin: 0 .875rem;
}

.hi-navbar__section {
    font-family: var(--hi-font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--hi-text-muted);
}


/* ── 5. Page header ───────────────────────────────────────── */

.hi-page-header {
    background-color: var(--hi-bg);
    padding: 1.75rem 0 1.5rem;
}

.hi-page-header__eyebrow {
    display: block;
    font-family: var(--hi-font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hi-blue);
    margin-bottom: .375rem;
}

.hi-page-header__title {
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hi-navy);
    margin-bottom: .25rem;
    line-height: 1.2;
}

.hi-page-header__lead {
    font-size: .875rem;
    color: var(--hi-text-muted);
    margin: 0;
}


/* ── 6. Cards ─────────────────────────────────────────────── */

.hi-card {
    background-color: var(--hi-surface);
    border: 1px solid var(--hi-border);
    border-radius: var(--hi-radius-lg);
    overflow: hidden;
}

.hi-card__header {
    background-color: var(--hi-surface);
    border-bottom: 1px solid var(--hi-border-soft);
    padding: var(--hi-card-header-pad);
    display: flex;
    align-items: center;
    gap: .625rem;
}

.hi-card__icon {
    width: 28px;
    height: 28px;
    background-color: var(--hi-blue-light);
    border-radius: var(--hi-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hi-blue);
    font-size: .875rem;
    flex-shrink: 0;
}

.hi-card__title {
    font-family: var(--hi-font-display);
    font-size: .725rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hi-text-primary);
    margin: 0;
}

.hi-card__tag {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 600;
    color: var(--hi-text-placeholder);
}

.hi-card__body { padding: var(--hi-card-pad); }


/* ── 7. Botones ───────────────────────────────────────────── */

.hi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-family: var(--hi-font-display);
    font-size: .725rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--hi-btn-pad);
    border-radius: var(--hi-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--hi-transition),
        border-color var(--hi-transition),
        color var(--hi-transition);
    white-space: nowrap;
    line-height: 1;
}

/* Primario */
.hi-btn--primary {
    background-color: var(--hi-blue);
    border-color: var(--hi-blue);
    color: #ffffff;
}

.hi-btn--primary:hover,
.hi-btn--primary:focus-visible {
    background-color: var(--hi-blue-hover);
    border-color: var(--hi-blue-hover);
    color: #ffffff;
    outline: none;
    text-decoration: none;
}

.hi-btn--primary:active {
    background-color: var(--hi-blue-active);
    border-color: var(--hi-blue-active);
    color: #ffffff;
}

/* Secundario */
.hi-btn--secondary {
    background-color: var(--hi-surface);
    border-color: var(--hi-border-input);
    color: var(--hi-text-secondary);
}

.hi-btn--secondary:hover,
.hi-btn--secondary:focus-visible {
    background-color: var(--hi-bg);
    border-color: var(--hi-text-placeholder);
    color: var(--hi-text-primary);
    outline: none;
    text-decoration: none;
}

/* Tamaños */
.hi-btn--sm   { font-size: .65rem; padding: var(--hi-btn-pad-sm); }
.hi-btn--lg   { font-size: .8rem;  padding: var(--hi-btn-pad-lg); }
.hi-btn--full { width: 100%; }


/* ── 8. Formularios ───────────────────────────────────────── */

.hi-label {
    display: block;
    font-family: var(--hi-font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hi-text-muted);
    margin-bottom: .3rem;
}

.hi-label__req {
    color: var(--hi-blue);
    margin-left: .1rem;
}

.hi-input,
.hi-select,
.hi-textarea {
    display: block;
    width: 100%;
    font-family: var(--hi-font-body);
    font-size: .875rem;
    color: var(--hi-text-primary);
    background-color: var(--hi-surface);
    border: 1.5px solid var(--hi-border-input);
    border-radius: var(--hi-radius-md);
    padding: var(--hi-input-pad);
    transition:
        border-color var(--hi-transition),
        box-shadow var(--hi-transition);
    line-height: 1.5;
    appearance: none;
}

.hi-input::placeholder,
.hi-textarea::placeholder { color: var(--hi-text-placeholder); }

.hi-input:focus,
.hi-select:focus,
.hi-textarea:focus {
    outline: none;
    border-color: var(--hi-blue);
    box-shadow: var(--hi-shadow-focus);
}

.hi-input.is-invalid,
.hi-select.is-invalid,
.hi-textarea.is-invalid { border-color: #dc3545; }

.hi-textarea {
    resize: vertical;
    min-height: 100px;
}

.hi-char-hint {
    font-size: .7rem;
    color: var(--hi-text-placeholder);
    text-align: right;
    margin-top: .2rem;
}


/* ── 9. Badges de estado ──────────────────────────────────── */

.hi-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--hi-font-display);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem .875rem;
    border-radius: var(--hi-radius-md);
    white-space: nowrap;
}

.hi-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hi-status--pending  { background-color: var(--hi-warning-bg); color: var(--hi-warning-text); }
.hi-status--pending  .hi-status__dot { background-color: #d97706; }

.hi-status--progress { background-color: var(--hi-info-bg); color: var(--hi-info-text); }
.hi-status--progress .hi-status__dot { background-color: #2563eb; animation: hi-pulse 1.2s infinite; }

.hi-status--complete { background-color: var(--hi-success-bg); color: var(--hi-success-text); }
.hi-status--complete .hi-status__dot { background-color: var(--hi-success-color); }

.hi-status--cancelled { background-color: var(--hi-danger-bg); color: var(--hi-danger-text); }
.hi-status--cancelled .hi-status__dot { background-color: #dc3545; }

@keyframes hi-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}


/* ── 10. Fields de solo lectura ───────────────────────────── */

.hi-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.hi-field__label {
    font-family: var(--hi-font-display);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hi-text-placeholder);
}

.hi-field__value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--hi-text-primary);
}

.hi-field__value--link { color: var(--hi-text-link); }


/* ── 11. Alerts e info boxes ──────────────────────────────── */

.hi-alert {
    border-radius: var(--hi-radius-md);
    padding: .875rem 1rem;
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.hi-alert--success { background-color: var(--hi-success-bg); color: var(--hi-success-text); }
.hi-alert--danger  { background-color: var(--hi-danger-bg);  color: var(--hi-danger-text);  }
.hi-alert--warning { background-color: var(--hi-warning-bg); color: var(--hi-warning-text); }
.hi-alert--info    { background-color: var(--hi-info-bg);    color: var(--hi-info-text);    }

.hi-infobox {
    background-color: var(--hi-blue-light);
    border-radius: var(--hi-radius-md);
    padding: .625rem .875rem;
    font-size: .8rem;
    color: var(--hi-info-text);
    line-height: 1.5;
}


/* ── 12. Footer ───────────────────────────────────────────── */

.hi-footer {
    background-color: var(--hi-navy);
    padding: 1rem 1.5rem;
    margin-top: auto;
}

.hi-footer__brand {
    font-family: var(--hi-font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #ffffff;
}

.hi-footer__copy {
    font-size: .7rem;
    color: rgba(255, 255, 255, .35);
}


/* ── 13. Loading overlay ──────────────────────────────────── */

.hi-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 28, 46, .75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.hi-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

.hi-overlay__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: var(--hi-blue);
    border-radius: 50%;
    animation: hi-spin .75s linear infinite;
    margin-bottom: .875rem;
}

.hi-overlay__label {
    font-family: var(--hi-font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

@keyframes hi-spin { to { transform: rotate(360deg); } }


/* ── 14. Utilidades ───────────────────────────────────────── */

.hi-divider {
    height: 1px;
    background-color: var(--hi-border-soft);
    margin: 1rem 0;
}

.hi-text-blue  { color: var(--hi-blue) !important; }
.hi-text-muted { color: var(--hi-text-muted) !important; }
.hi-bg-surface { background-color: var(--hi-surface); }
.hi-bg-page    { background-color: var(--hi-bg); }


/* ── 15. Responsive ───────────────────────────────────────── */

@media (max-width: 575.98px) {
    .hi-navbar      { padding: 0 1rem; }
    .hi-page-header { padding: 1.25rem 0 1rem; }
    .hi-card__body  { padding: .875rem; }
}


/* ── 16. Print ────────────────────────────────────────────── */

@media print {
    .hi-navbar,
    .hi-footer,
    .hi-btn,
    .hi-overlay     { display: none !important; }
    body            { background-color: #fff !important; }
    .hi-card        { border: 1px solid #ddd !important; }
    .hi-page-header { background-color: #fff !important; }
}