/**
 * Estilos para el sistema de conteo de caracteres
 * 
 * @author Sistema Medica Empresarial
 * @date 2026-01-19
 */

/* Contenedor del contador */
.character-counter-container {
    text-align: right;
    font-size: 0.85em;
    color: #666;
    margin-top: 4px;
    padding-right: 4px;
    transition: color 0.3s ease;
}

/* Texto del contador */
.character-counter-text {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

/* Estado de advertencia (cerca del límite) */
.character-counter-warning .character-counter-text {
    color: #f0ad4e !important;
    font-weight: normal;
}

/* Estado límite alcanzado */
.character-counter-limit .character-counter-text {
    color: #d9534f !important;
    font-weight: bold;
}

/* Animación sutil cuando se alcanza el límite */
.character-counter-limit {
    animation: pulseWarning 0.5s ease-in-out;
}

@keyframes pulseWarning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Responsive: ajustar tamaño en pantallas pequeñas */
@media (max-width: 768px) {
    .character-counter-container {
        font-size: 0.8em;
    }
    
    .character-counter-text {
        font-size: 11px;
    }
}

/* Soporte para modo oscuro (si la aplicación lo implementa) */
@media (prefers-color-scheme: dark) {
    .character-counter-container {
        color: #aaa;
    }
    
    .character-counter-warning .character-counter-text {
        color: #ffc107 !important;
    }
    
    .character-counter-limit .character-counter-text {
        color: #ff6b6b !important;
    }
}

/* Integración con Bootstrap (si se usa) */
.form-group .character-counter-container {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Integración con Yii2 ActiveForm */
.field-textarea .character-counter-container {
    margin-top: 0.25rem;
}