/*
 * Sistema de diseño unificado (L7), inspirado en IBM Carbon: superficies
 * planas, esquinas rectas, bordes de 1px, tipografía contenida y una escala
 * de espaciado consistente. UNA hoja para el CRM del tenant y para el panel
 * de la plataforma: dos plantillas, un solo lenguaje visual.
 *
 * El color del tenant sigue mandando: --primario lo pone cada plantilla.
 */

:root {
    --primario: #1f2937;
    /* Paleta neutra tipo Carbon (gray family) */
    --fondo: #f4f4f4;
    --superficie: #ffffff;
    --texto: #161616;
    --texto-suave: #525252;
    --borde: #e0e0e0;
    --borde-fuerte: #8d8d8d;
    --campo: #f4f4f4;
    --foco: #0f62fe;
    --exito: #24a148;
    --error: #da1e28;
    --aviso-info: #0043ce;
    /* Escala de espaciado (Carbon spacing) */
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
}

* { box-sizing: border-box; }

body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    margin: 0;
    color: var(--texto);
    background: var(--fondo);
    font-size: .875rem;
    line-height: 1.45;
}

/* ── Cabecera (UI shell) ─────────────────────────────────────────── */
header.shell {
    background: var(--primario);
    color: #fff;
    display: flex;
    align-items: center;
    gap: var(--esp-5);
    padding: 0 var(--esp-4);
    min-height: 3rem;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
header.shell .marca { font-weight: 600; letter-spacing: .01em; }
nav { display: flex; gap: 0; flex: 1; }

.modulo { position: relative; }
.modulo-boton {
    background: none; border: 0; color: #fff; font: inherit; font-size: .875rem;
    padding: .85rem .9rem; cursor: pointer; opacity: .85; border-bottom: 3px solid transparent;
}
.modulo:hover .modulo-boton, .modulo-boton:focus { background: rgba(255,255,255,.12); opacity: 1; outline: none; }
.modulo-menu {
    display: none; position: absolute; top: 100%; left: 0; background: var(--superficie);
    border: 1px solid var(--borde); box-shadow: 0 2px 6px rgba(0,0,0,.2);
    min-width: 13rem; padding: .25rem 0; z-index: 20;
}
.modulo:hover .modulo-menu, .modulo:focus-within .modulo-menu { display: block; }
.modulo-menu a {
    display: block; color: var(--texto); text-decoration: none;
    padding: .55rem .9rem; font-size: .875rem; border-left: 3px solid transparent;
}
.modulo-menu a:hover { background: #e8e8e8; border-left-color: var(--primario); }

.sesion { display: flex; align-items: center; gap: var(--esp-3); font-size: .8125rem; }
.sesion form { margin: 0; }
.sesion button {
    background: rgba(255,255,255,.15); color: #fff; border: 0;
    padding: .45rem .9rem; cursor: pointer; font-size: .8125rem;
}
.sesion button:hover { background: rgba(255,255,255,.28); }

/* ── Contenido ───────────────────────────────────────────────────── */
main { max-width: 66rem; margin: var(--esp-5) auto; padding: 0 var(--esp-4); }
h1 { font-size: 1.5rem; font-weight: 400; margin: 0 0 var(--esp-4); letter-spacing: 0; }
h2 { font-weight: 600; margin: var(--esp-6) 0 var(--esp-3); }
a { color: var(--aviso-info); }

/* ── Tablas (data table) ─────────────────────────────────────────── */
table {
    width: 100%; border-collapse: collapse; background: var(--superficie);
    border: 1px solid var(--borde);
}
th, td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--borde); font-size: .875rem; }
th {
    background: #e0e0e0; font-size: .75rem; font-weight: 600;
    text-transform: none; letter-spacing: .02em; color: var(--texto);
}
tbody tr:hover, table tr:hover td { background: #ececec; }

/* ── Tarjetas (tiles) ────────────────────────────────────────────── */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); padding: var(--esp-4) var(--esp-4); }
.tarjeta .cifra { font-size: 1.75rem; font-weight: 300; color: var(--primario); line-height: 1.2; }

/* ── Botones ─────────────────────────────────────────────────────── */
.boton {
    display: inline-block; background: var(--primario); color: #fff; border: 0;
    padding: .6rem 1rem; cursor: pointer; text-decoration: none;
    font-size: .875rem; font-family: inherit; border-radius: 0; text-align: left;
}
.boton:hover { filter: brightness(1.12); }
.boton:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
.boton.secundario { background: #393939; }
.boton.secundario:hover { background: #4c4c4c; filter: none; }
/* Destructivo: se ve distinto porque hace algo distinto. Deshabilitado se
   ve deshabilitado — un botón que no va a funcionar no debe invitar. */
.boton.peligro { background: var(--peligro, #da1e28); }
.boton.peligro:hover { background: #b81922; filter: none; }
.boton[disabled] { background: #c6c6c6; color: #8d8d8d; cursor: not-allowed; }
.boton[disabled]:hover { filter: none; background: #c6c6c6; }

/* ── Notificaciones (inline notification) ────────────────────────── */
.aviso {
    padding: .8rem 1rem; border-left: 3px solid var(--exito); background: var(--superficie);
    margin-bottom: var(--esp-4); border-top: 1px solid var(--borde);
    border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.aviso.error { border-left-color: var(--error); }

/* ── Formularios ─────────────────────────────────────────────────── */
label { display: block; margin-top: var(--esp-3); font-weight: 400; font-size: .75rem; color: var(--texto-suave); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=color], select, textarea {
    width: 100%; max-width: 26rem; padding: .55rem .9rem; margin-top: .25rem;
    border: none; border-bottom: 1px solid var(--borde-fuerte);
    background: var(--campo); font: inherit; color: var(--texto); border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--foco); outline-offset: -2px; }

/* ── Etiquetas (tags) ────────────────────────────────────────────── */
.insignia {
    display: inline-block; padding: .1rem .6rem; border-radius: 999px;
    font-size: .75rem; background: #e0e0e0; color: var(--texto);
}
.insignia.ok { background: #a7f0ba; color: #044317; }
.insignia.baja { background: #ffd7d9; color: #750e13; }
/* El semáforo tiene TRES luces y la de en medio no tenía color: un riesgo
   ámbar salía con el gris de la base, indistinguible de «no aplica». En una
   pantalla de vigilancia eso no es un detalle de estilo. */
.insignia.aviso { background: #fddc69; color: #684e00; }
/* Y lo que de verdad no aplica se apaga, para que no compita con las tres. */
.insignia.apagado { background: #f4f4f4; color: #6f6f6f; }

/* Las superficies blancas declaradas inline en las vistas heredan el
   borde del sistema: en este lenguaje no existe una superficie sin borde.
   (El inline gana si la vista declara el suyo propio.) */
main [style*="background:#fff"], main [style*="background: #fff"] {
    border: 1px solid var(--borde);
}

/* ── Utilidades existentes ───────────────────────────────────────── */
.paginacion { display: flex; gap: var(--esp-2); margin-top: var(--esp-4); }
.detalle { color: var(--texto-suave); font-size: .78rem; }
form.enlinea { display: inline; }