/* =============================================
   GenesysCore - Estilos base / reset
   ============================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fuente);
    font-size: var(--texto-base);
    color: var(--color-texto);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol { list-style: none; }

/* ── Scrollbar personalizada ─────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-texto-suave); }

/* ── Formularios base ────────────────────────── */
.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo label {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-texto);
}

.campo label .requerido {
    color: var(--color-error);
    margin-left: 2px;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-bg-card);
    color: var(--color-texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
    outline: none;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--color-borde-focus);
    box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.15);
}

.campo input.error,
.campo select.error {
    border-color: var(--color-error);
}

.campo .error-msg {
    font-size: var(--texto-xs);
    color: var(--color-error);
    display: none;
}

.campo.tiene-error .error-msg { display: block; }
.campo.tiene-error input,
.campo.tiene-error select { border-color: var(--color-error); }

/* ── Botones ─────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radio);
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicion), transform var(--transicion), opacity var(--transicion);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primario  { background: var(--color-primario); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--color-primario-dark); }

.btn-secundario { background: var(--color-bg); color: var(--color-texto); border: 1.5px solid var(--color-borde); }
.btn-secundario:hover:not(:disabled) { background: var(--color-borde); }

.btn-peligro   { background: var(--color-error); color: #fff; }
.btn-peligro:hover:not(:disabled) { background: #b91c1c; }

.btn-exito     { background: var(--color-exito); color: #fff; }
.btn-exito:hover:not(:disabled) { background: #15803d; }

.btn-sm  { padding: 6px 12px; font-size: var(--texto-xs); }
.btn-lg  { padding: 13px 28px; font-size: var(--texto-base); }
.btn-bloque { width: 100%; }

/* ── Alertas ─────────────────────────────────── */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radio);
    font-size: var(--texto-sm);
    margin-bottom: 16px;
}

.alerta-error   { background: var(--color-error-bg);    color: #991b1b; }
.alerta-exito   { background: var(--color-exito-bg);    color: #14532d; }
.alerta-aviso   { background: var(--color-advertencia-bg); color: #92400e; }
.alerta-info    { background: var(--color-info-bg);     color: #075985; }
.alerta.oculto  { display: none; }

/* ── Badges / Etiquetas ──────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 600;
    line-height: 1.6;
}

.badge-verde  { background: var(--color-exito-bg);    color: var(--color-exito); }
.badge-rojo   { background: var(--color-error-bg);    color: var(--color-error); }
.badge-amarillo { background: var(--color-advertencia-bg); color: var(--color-advertencia); }
.badge-azul   { background: var(--color-primario-light); color: var(--color-primario); }
.badge-gris   { background: #f1f5f9; color: var(--color-texto-suave); }

/* ── Spinner ─────────────────────────────────── */
.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar .7s linear infinite;
    display: inline-block;
}

.spinner-oscuro {
    border-color: rgba(26, 111, 196, .3);
    border-top-color: var(--color-primario);
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ── Utilidades ──────────────────────────────── */
.oculto     { display: none !important; }
.visible    { display: block !important; }
.texto-centro { text-align: center; }
.texto-derecha { text-align: right; }
.texto-suave { color: var(--color-texto-suave); }
.negrita    { font-weight: 700; }
.truncar    { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }