/* ============================================================
   COMPONENTES COMPARTIDOS
   ------------------------------------------------------------
   Lo que se usa en mas de una pagina: botones, campos de
   formulario, alertas. Nada especifico de una pantalla.

   Todo se construye sobre las variables de tokens.css.
   Regla: aqui NO se escriben colores literales, solo var(--...).
   ============================================================ */

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

html, body { height: 100%; }

body { margin: 0; }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
    margin: 0;
    color: var(--text-heading);
    font-weight: var(--weight-semibold);
}

h1 { font-size: var(--text-h3); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); }
h2 { font-size: var(--text-h4); line-height: var(--text-h4-lh); }

p { margin: 0; }

.texto-apagado { color: var(--text-muted); }
.texto-pequeno { font-size: var(--text-small); line-height: var(--text-small-lh); }

/* Etiqueta en mono mayusculas: es el recurso de marca de Contadata */
.etiqueta {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ============================================================
   CAMPOS DE FORMULARIO
   ============================================================ */
.campo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.campo + .campo { margin-top: var(--space-5); }

.campo label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-body);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    color: var(--text-body);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition-color), box-shadow var(--duration-base) var(--ease-standard);
}

.campo input::placeholder { color: var(--text-subtle); }

.campo input:hover:not(:disabled) { border-color: var(--border-strong); }

.campo input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

.campo input:disabled {
    background: var(--surface-sunken);
    color: var(--text-subtle);
    cursor: not-allowed;
}

/* Campo con error de validacion */
.campo input.con-error,
.campo input[aria-invalid="true"] {
    border-color: var(--estado-omision);
}

.campo input.con-error:focus,
.campo input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(166, 76, 60, .22);
}

.campo .error-campo {
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
    color: var(--estado-omision);
}

.campo .ayuda-campo {
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
    color: var(--text-subtle);
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-color), box-shadow var(--duration-base) var(--ease-standard);
}

.boton:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.boton:disabled {
    background: var(--action-disabled);
    border-color: var(--action-disabled);
    color: var(--text-subtle);
    cursor: not-allowed;
}

.boton-primario {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-on-verde);
}

.boton-primario:hover:not(:disabled) {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
}

.boton-primario:active:not(:disabled) {
    background: var(--action-primary-active);
    border-color: var(--action-primary-active);
}

.boton-secundario {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-body);
}

.boton-secundario:hover:not(:disabled) {
    background: var(--surface-sunken);
    border-color: var(--border-verde);
    color: var(--text-heading-brand);
}

.boton-ancho { width: 100%; }

/* ============================================================
   ALERTAS
   Usan los tokens de estado del manual: verde conciliado,
   mostaza revisar, rojo omision.
   ============================================================ */
.alerta {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid;
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    line-height: var(--text-small-lh);
}

.alerta-error {
    background: var(--estado-omision-fondo);
    border-color: var(--estado-omision-borde);
    color: var(--estado-omision);
}

.alerta-aviso {
    background: var(--estado-revisar-fondo);
    border-color: var(--estado-revisar-borde);
    color: var(--estado-revisar);
}

.alerta-exito {
    background: var(--estado-conciliado-fondo);
    border-color: var(--estado-conciliado-borde);
    color: var(--estado-conciliado);
}

.alerta-icono {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

/* Visible solo para lectores de pantalla */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}