/* app.css — base global. El design system completo está en css/testigo-design.css */

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #F3F6FB;
    color: #0F172A;
}

/* Mantener focus visible accesible */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus,
.input-tgo:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    outline: none;
}

h1:focus {
    outline: none;
}

/* Validación de formularios */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #059669;
}

.invalid {
    outline: 1px solid #DC2626;
}

.validation-message {
    color: #DC2626;
    font-size: 12px;
    margin-top: 4px;
}

/* Error boundary de Blazor */
.blazor-error-boundary {
    background: #FEF2F2;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    color: #DC2626;
    padding: 12px 16px;
    font-size: 14px;
}

.blazor-error-boundary::after {
    content: "Se ha producido un error."
}

/* Override Bootstrap para light theme */
.form-control, .form-select {
    background-color: #FAFAF8;
    border-color: rgba(0, 0, 0, 0.1);
    color: #0F172A;
    border-radius: 12px;
}

.form-control:focus, .form-select:focus {
    background-color: #FFFFFF;
    border-color: #2563EB;
    color: #0F172A;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.form-control::placeholder {
    color: #C0BDD8;
}

.form-label {
    color: #0F172A;
    font-size: 13px;
    font-weight: 600;
}

/* Override modal Bootstrap */
.modal-content {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F172A;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.modal-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.modal-title {
    color: #0F172A;
    font-weight: 700;
}

.modal-backdrop.show {
    background: rgba(26, 26, 46, 0.3);
    backdrop-filter: blur(4px);
}

/* Breadcrumb override */
.breadcrumb-item + .breadcrumb-item::before {
    color: #A8A8C0;
}