/**
 * READONLY FIELDS - Estilos estandarizados para campos de solo lectura
 *
 * Este archivo proporciona estilos consistentes para campos readonly/calculados
 * garantizando claridad visual de que no son editables.
 *
 * Patron de uso: Aplicar clase 'readonly-field' a inputs readonly
 * Compatible con: Bootstrap 5, Input Groups, Form Controls
 */

/* =================================================================
   CAMPO READONLY BASE
   ================================================================= */

.form-control.readonly-field,
.form-control[readonly] {
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
    font-weight: 500;
}

/* Remover efectos de focus para campos readonly */
.form-control.readonly-field:focus,
.form-control[readonly]:focus {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Prevenir seleccion de texto en campos readonly para enfatizar no-editable */
.form-control.readonly-field {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* =================================================================
   INPUT GROUP ADDONS PARA READONLY
   ================================================================= */

/* Input group text (spans) que acompanan campos readonly */
.input-group > .form-control.readonly-field + .input-group-text,
.input-group > .form-control[readonly] + .input-group-text {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

/* Iconos dentro de input-group-text */
.input-group-text .fas {
    opacity: 0.7;
}

/* =================================================================
   VARIANTES DE TAMAÑO
   ================================================================= */

/* Campo readonly large */
.form-control-lg.readonly-field,
.form-control-lg[readonly] {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

/* Campo readonly small */
.form-control-sm.readonly-field,
.form-control-sm[readonly] {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* =================================================================
   ESTADOS ESPECIALES
   ================================================================= */

/* Campo readonly con error (mantener indicacion de readonly) */
.form-control.readonly-field.is-invalid,
.form-control[readonly].is-invalid {
    border-color: #dc3545 !important;
    background-color: #f8d7da !important;
}

/* Campo readonly con advertencia */
.form-control.readonly-field.is-warning {
    border-color: #ffc107 !important;
    background-color: #fff3cd !important;
}

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

/* Asegurar contraste adecuado para WCAG AA */
.form-control.readonly-field:disabled,
.form-control[readonly]:disabled {
    opacity: 0.85;
}

/* Tooltips para iconos de readonly */
[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* En mobile, hacer campos readonly mas compactos */
@media (max-width: 576px) {
    .form-control.readonly-field,
    .form-control[readonly] {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .input-group-text {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}