/* =============================================================================
   Proveedores — hoja de estilo única
   ---------------------------------------------------------------------------
   Basada en DESIGN.md. Ese documento describe un lienzo de marketing (titulares
   de 136px, bandas negras a sangre, mockups de producto a página completa) que
   una aplicación CRUD interna no puede usar literalmente: aquí la pantalla la
   ocupa una tabla de 247 filas, no un héroe.

   Lo que se adopta: la paleta completa como custom properties, Inter para todo
   el texto, botones en píldora, radios de 12/20px, y la ausencia de sombras.
   Lo que se acota: el tamaño tipográfico se topa en heading-lg (32px) y el
   cobalto #494fdf se reserva para la acción primaria y el ítem de navegación
   activo — si todo es primario, nada lo es.

   DESVIACIÓN DELIBERADA: DESIGN.md reserva la paleta de acentos para
   ilustraciones. Aquí los badges de estado la usan (APTO verde, NO APTO rojo,
   EN PROCESO naranja, revisión ámbar). En una aplicación de datos, codificar el
   estado en color no es decoración: es la información.
   ============================================================================= */

:root {
    /* Marca */
    --primary:        #494fdf;
    --primary-bright: #4f55f1;
    --primary-deep:   #3a40c4;
    --on-primary:     #ffffff;

    /* Texto */
    --ink:      #191c1f;
    --body:     #1f2226;
    --charcoal: #3a3d40;
    --mute:     #505a63;
    --stone:    #8d969e;
    --faint:    #c9c9cd;

    /* Superficies */
    --canvas-light:  #ffffff;
    --canvas-dark:   #000000;
    --surface-soft:  #f4f4f4;
    --surface-card:  #ffffff;
    --surface-deep:  #0a0a0a;
    --surface-elev:  #16181a;

    /* Líneas */
    --hairline:      #e2e2e7;
    --hairline-dark: rgba(255, 255, 255, .12);
    --divider-soft:  rgba(255, 255, 255, .06);

    /* Acentos (estado) */
    --teal:        #00a87e;
    --green:       #428619;
    --green-text:  #006400;
    --yellow:      #b09000;
    --warning:     #ec7e00;
    --danger:      #e23b4a;
    --pink:        #e61e49;
    --link:        #376cd5;

    /* Radios */
    --r-sm:   8px;
    --r-md:  12px;
    --r-lg:  20px;
    --r-full: 999px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .24px;
    color: var(--body);
    background: var(--canvas-light);
}

/* ---- Estructura ---------------------------------------------------------- */

.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.side {
    background: var(--canvas-dark);
    color: #fff;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.marca { display: flex; align-items: center; gap: 12px; }
.marca-punto {
    width: 12px; height: 12px; border-radius: var(--r-full);
    background: var(--primary); flex: 0 0 auto;
}
.marca strong { display: block; font-size: 20px; font-weight: 500; letter-spacing: 0; }
.marca small  { display: block; color: rgba(255,255,255,.72); font-size: 13px; }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    padding: 11px 14px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
}
.nav a:hover  { background: var(--divider-soft); color: #fff; }
.nav a.activo { background: var(--primary); color: var(--on-primary); }

.side-pie { border-top: 1px solid var(--hairline-dark); padding-top: 16px; }
.usuario-nombre { display: block; font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 4px; }

.contenido { padding: 36px 40px 64px; max-width: 1440px; }

/* ---- Tipografía ---------------------------------------------------------- */

h1 { font-size: 32px; font-weight: 500; line-height: 1.19; letter-spacing: -.32px; color: var(--ink); margin: 0 0 4px; }
h2 { font-size: 24px; font-weight: 500; line-height: 1.33; color: var(--ink); margin: 32px 0 12px; }
h3 { font-size: 20px; font-weight: 500; line-height: 1.4;  color: var(--ink); margin: 24px 0 8px; }

.subtitulo { color: var(--mute); font-size: 14px; margin: 0 0 24px; }
.caption   { font-size: 13px; color: var(--stone); }
a          { color: var(--link); }

/* ---- Avisos -------------------------------------------------------------- */

.aviso {
    padding: 14px 18px;
    border-radius: var(--r-md);
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid var(--hairline);
}
.aviso-ok    { background: #f0f9f4; border-color: #cbe8d8; color: var(--green-text); }
.aviso-error { background: #fdf1f2; border-color: #f5cdd1; color: var(--danger); }
.aviso-info  { background: var(--surface-soft); color: var(--mute); }

/* ---- Tarjetas y rejillas ------------------------------------------------- */

.tarjeta {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px;
}

.rejilla       { display: grid; gap: 16px; }
.rejilla-2     { grid-template-columns: repeat(2, 1fr); }
.rejilla-3     { grid-template-columns: repeat(3, 1fr); }
.rejilla-4     { grid-template-columns: repeat(4, 1fr); }
.barra         { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.barra-derecha { margin-left: auto; }

.metrica       { background: var(--surface-soft); border-radius: var(--r-lg); padding: 20px 22px; }
.metrica-valor { font-size: 32px; font-weight: 500; letter-spacing: -.32px; color: var(--ink); line-height: 1.1; }
.metrica-nombre{ font-size: 13px; color: var(--mute); margin-top: 4px; }

/* ---- Formularios --------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }

input[type=text], input[type=email], input[type=date], input[type=number],
input[type=search], select, textarea {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--body);
    background: var(--canvas-light);
}
textarea { height: auto; padding: 14px 16px; min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(73, 79, 223, .16);
}

.campo       { margin-bottom: 18px; }
.campo-error { color: var(--danger); font-size: 13px; margin-top: 6px; }

.validation-summary-errors {
    background: #fdf1f2; border: 1px solid #f5cdd1; color: var(--danger);
    border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 20px; font-size: 14px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.field-validation-error { color: var(--danger); font-size: 13px; }

/* ---- Botones ------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 24px;
    border: 1px solid transparent; border-radius: var(--r-full);
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-primario  { background: var(--primary); color: var(--on-primary); }
.btn-primario:hover { background: var(--primary-bright); }
.btn-secundario { background: var(--canvas-light); color: var(--ink); border-color: var(--hairline); }
.btn-secundario:hover { background: var(--surface-soft); }
.btn-peligro   { background: var(--canvas-light); color: var(--danger); border-color: #f5cdd1; }
.btn-peligro:hover { background: #fdf1f2; }
.btn-sm        { height: 36px; padding: 0 16px; font-size: 13px; }

.enlace {
    background: none; border: none; padding: 0;
    color: var(--link); font: inherit; font-size: 13px;
    cursor: pointer; text-decoration: underline;
}

/* ---- Tablas -------------------------------------------------------------- */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead th {
    background: var(--surface-soft);
    text-align: left;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mute);
    padding: 12px 16px;
    white-space: nowrap;
    border-bottom: 1px solid var(--hairline);
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafafb; }

td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono  { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }

/* ---- Badges de estado ----------------------------------------------------
   Desviación consciente de DESIGN.md: aquí el color ES el dato.             */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 12px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
.badge-apto        { background: #eef7e8; color: var(--green);   border-color: #d3e9c2; }
.badge-no-apto     { background: #fdf1f2; color: var(--danger);  border-color: #f5cdd1; }
.badge-en-proceso  { background: #fdf3e7; color: var(--warning); border-color: #f7ddbd; }
.badge-baja-sunat  { background: #f1f2f3; color: var(--mute);    border-color: var(--hairline); }
.badge-no-vigente  { background: #f1f2f3; color: var(--stone);   border-color: var(--hairline); }
.badge-revision    { background: #fbf5e0; color: var(--yellow);  border-color: #efe1ae; }
.badge-homologado  { background: #e8f6f2; color: var(--teal);    border-color: #c2e6dc; }
.badge-neutro      { background: var(--surface-soft); color: var(--mute); border-color: var(--hairline); }

.sev-critica    { background: #fdf1f2; color: var(--danger);  border-color: #f5cdd1; }
.sev-importante { background: #fdf3e7; color: var(--warning); border-color: #f7ddbd; }
.sev-media      { background: #fbf5e0; color: var(--yellow);  border-color: #efe1ae; }
.sev-baja       { background: var(--surface-soft); color: var(--mute); border-color: var(--hairline); }

/* ---- Paginación ---------------------------------------------------------- */

.paginacion { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: 14px; }
.paginacion .caption { margin-right: auto; }

/* ---- Detalle ------------------------------------------------------------- */

.dl { display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; font-size: 14px; margin: 0; }
.dl dt { color: var(--mute); font-size: 13px; }
.dl dd { margin: 0; color: var(--ink); }

.vacio { padding: 48px 24px; text-align: center; color: var(--stone); }

@media (max-width: 1100px) {
    .app { grid-template-columns: 1fr; }
    .side { flex-direction: row; align-items: center; gap: 20px; padding: 16px 20px; }
    .nav { flex-direction: row; }
    .side-pie { border-top: none; padding-top: 0; }
    .contenido { padding: 24px 20px 48px; }
    .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
    .dl { grid-template-columns: 1fr; gap: 2px 0; }
    .dl dd { margin-bottom: 10px; }
}