Estilos UI Estrictos - SGRRHH

Archivo Principal de Estilos

Ubicación: SGRRHH.Local.Server/wwwroot/css/hospital.css

[!CAUTION] REGLAS ESTRICTAMENTE PROHIBIDAS - VIOLACIÓN = ERROR CRÍTICO:

•❌ NUNCA crear bloques <style> inline en componentes .razor

•❌ NUNCA usar atributo style="..." en elementos HTML

•❌ NUNCA usar colores arbitrarios (#00ff00, rgb(), etc.)

•❌ NUNCA crear archivos CSS específicos por componente

•✅ SIEMPRE usar las clases CSS existentes en hospital.css

Ejemplos de Violaciones

❌ INCORRECTO - Estilo Inline en Razor

razor

@* ❌ PROHIBIDO *@
<style>
    .mi-boton {
        background: #00ff00;
        color: white;
    }
</style>

<button class="mi-boton">Click</button>

❌ INCORRECTO - Atributo style

razor

@* ❌ PROHIBIDO *@
<div style="color: red; font-size: 14px;">
    Error
</div>

❌ INCORRECTO - Colores arbitrarios en CSS nuevo

css

/* ❌ PROHIBIDO */
.nuevo-componente {
    background: #FF5733;  /* Color arbitrario */
    border: 1px solid green;
}

✅ CORRECTO - Usar clases existentes

razor

@* ✅ CORRECTO *@
<div class="error-block">
    Error
</div>

<button class="btn-primary">GUARDAR</button>

<div class="modal-overlay">
    <div class="modal-box">
        <div class="modal-header">TÍTULO</div>
    </div>
</div>

Variables CSS Obligatorias

Si necesitas crear estilos nuevos, DEBES usar estas variables:

Colores Base

css

var(--color-bg)           /* #FFFFFF - Fondo principal */
var(--color-text)         /* #000000 - Texto principal */
var(--color-border)       /* #666666 - Bordes oscuros */
var(--color-border-light) /* #CCCCCC - Bordes claros */
var(--color-disabled-bg)  /* #F0F0F0 - Fondo deshabilitado */
var(--color-disabled-text)/* #999999 - Texto deshabilitado */

Colores de Estado

css

var(--color-error)    /* #CC0000 - Errores, eliminación */
var(--color-warning)  /* #FF9900 - Advertencias */
var(--color-success)  /* #006600 - Éxito */

Tipografía

css

var(--font-family)      /* 'Courier New', monospace */
var(--font-size-base)   /* 13px */
var(--font-size-header) /* 14px */

Clases CSS Disponibles

Botones

Clase	Uso
`.btn-action`	Botón de acción general
`.btn-primary`	Botón principal (azul)
`.btn-danger`	Acción destructiva (rojo)
`.btn-success`	Confirmación (verde)
`.btn-aprobar`	Aprobar (borde verde)
`.btn-rechazar`	Rechazar (borde rojo)

Modales

Clase	Uso
`.modal-overlay`	Fondo oscuro semi-transparente
`.modal-box`	Contenedor del modal
`.modal-header`	Cabecera con título
`.modal-footer`	Pie con botones de acción

Formularios

Clase	Uso
`.campo-form`	Contenedor de campo
`.campo-label`	Etiqueta de campo
`.campo-input`	Input de campo
`.campo-requerido`	Marca obligatorio (*)
`.campo-textarea`	Textarea

Mensajes

Clase	Uso
`.error-block`	Bloque de error
`.success-block`	Bloque de éxito
`.loading-block`	Indicador de carga

Tablas

Clase	Uso
`.data-table`	Tabla de datos principal
`.row-inactive`	Fila de registro inactivo
`.cell-truncate`	Celda con texto truncado

Estados

Clase	Estado
`.estado-pendiente`	Pendiente (naranja)
`.estado-aprobada`	Aprobado (verde)
`.estado-rechazada`	Rechazado (rojo)
`.estado-programada`	Programado (azul)
`.estado-disfrutada`	Completado (gris)
`.estado-cancelada`	Cancelado (gris)

Layout

Clase	Uso
`.main-container`	Contenedor principal
`.work-area`	Área de trabajo
`.page-container`	Contenedor de página
`.page-header`	Cabecera de página
`.page-title`	Título de página
`.action-bar`	Barra de acciones
`.filter-section`	Sección de filtros
`.keyboard-shortcut-bar`	Barra de atajos (fija abajo)

Paneles

Clase	Uso
`.panel-lateral`	Panel lateral
`.panel-titulo`	Título del panel
`.panel-seccion`	Sección del panel
`.panel-label`	Etiqueta en panel
`.panel-valor`	Valor en panel

Si Necesitas Estilos Nuevos

Proceso OBLIGATORIO:

•✅ Verificar que NO existe una clase que puedas reutilizar
•✅ Agregar el nuevo estilo a hospital.css (NUNCA inline)
•✅ Usar SOLO las variables CSS existentes para colores
•✅ Documentar con comentario el propósito
•✅ Seguir naming convention: nombre-componente (kebab-case)

Ejemplo de Estilo Nuevo Correcto

css

/* ===== WIZARD CONTROL DIARIO ===== */
.wizard-step {
    font-family: var(--font-family);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 10px;
}

.wizard-step-active {
    border-color: var(--color-success);
    font-weight: bold;
}

.wizard-step-error {
    border-color: var(--color-error);
    color: var(--color-error);
}

Verificación Automática

Antes de aprobar cualquier PR o cambio UI, verificar:

bash

# Buscar violaciones de estilos inline
grep -r "<style>" SGRRHH.Local.Server/Components/
grep -r 'style="' SGRRHH.Local.Server/Components/

# No debería retornar resultados

Excepciones

NO HAY EXCEPCIONES. Esta regla se aplica a:

•✅ Páginas (@page)
•✅ Componentes reutilizables
•✅ Tabs
•✅ Modales
•✅ Formularios
•✅ Todo elemento UI

Consecuencias de Violación

Si se detecta una violación:

•El código NO se acepta
•Se debe corregir inmediatamente
•Se debe mover el estilo a hospital.css usando variables