427 lines
9.6 KiB
CSS
427 lines
9.6 KiB
CSS
/* ==================== Fluent 2 Design System ==================== */
|
|
|
|
/* Variables CSS para consistencia */
|
|
:root {
|
|
--fluent-primary: #6A1B9A;
|
|
--fluent-primary-light: #8E24AA;
|
|
--fluent-primary-dark: #4A148C;
|
|
--fluent-secondary: #323130;
|
|
--fluent-background: #faf9f8;
|
|
--fluent-surface: #ffffff;
|
|
--fluent-border: #e1dfdd;
|
|
--fluent-border-focus: #6A1B9A;
|
|
--fluent-text-primary: #323130;
|
|
--fluent-text-secondary: #605e5c;
|
|
--fluent-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0px 2px rgba(0, 0, 0, 0.12);
|
|
--fluent-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0px 4px rgba(0, 0, 0, 0.12);
|
|
--fluent-radius-small: 4px;
|
|
--fluent-radius-medium: 8px;
|
|
--fluent-radius-large: 12px;
|
|
}
|
|
|
|
/* Reset y configuración base */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--fluent-background);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
color: var(--fluent-text-primary);
|
|
}
|
|
|
|
/* ==================== Contenedor principal ==================== */
|
|
.card {
|
|
background-color: var(--fluent-surface);
|
|
border-radius: var(--fluent-radius-large);
|
|
box-shadow: var(--fluent-shadow-medium);
|
|
border: 1px solid var(--fluent-border);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
transition: box-shadow 0.3s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0px 8px rgba(0, 0, 0, 0.14);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.card-body {
|
|
padding: 32px !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* ==================== Formularios ==================== */
|
|
form {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
h3, h4 {
|
|
color: var(--fluent-text-primary);
|
|
font-weight: 600;
|
|
margin-bottom: 24px;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.75rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
border-bottom: 2px solid var(--fluent-primary);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
/* ==================== Labels ==================== */
|
|
.form-label {
|
|
font-weight: 500;
|
|
color: var(--fluent-text-primary);
|
|
margin-bottom: 8px !important;
|
|
margin-top: 20px !important;
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ==================== Inputs y Selects ==================== */
|
|
.form-control,
|
|
.form-select {
|
|
border: 2px solid var(--fluent-border) !important;
|
|
border-radius: var(--fluent-radius-small) !important;
|
|
padding: 12px 16px;
|
|
font-size: 0.875rem;
|
|
background-color: var(--fluent-surface);
|
|
color: var(--fluent-text-primary);
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
border-color: var(--fluent-border-focus) !important;
|
|
box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2) !important;
|
|
outline: none;
|
|
background-color: var(--fluent-surface);
|
|
}
|
|
|
|
.form-control:hover:not(:focus),
|
|
.form-select:hover:not(:focus) {
|
|
border-color: var(--fluent-primary-light) !important;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--fluent-text-secondary);
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-control:disabled,
|
|
.form-select:disabled {
|
|
background-color: #f3f2f1;
|
|
border-color: #e1dfdd !important;
|
|
color: var(--fluent-text-secondary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ==================== Botones ==================== */
|
|
.btn {
|
|
border-radius: var(--fluent-radius-small) !important;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
padding: 12px 24px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
border: 2px solid transparent !important;
|
|
text-align: center;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn.w-100 {
|
|
width: 100%;
|
|
margin: 24px 0 !important;
|
|
}
|
|
|
|
/* Botón primario */
|
|
.btn-primary,
|
|
.btn[style*="background-color: #35245b"] {
|
|
background-color: var(--fluent-primary) !important;
|
|
color: white !important;
|
|
border-color: var(--fluent-primary) !important;
|
|
}
|
|
|
|
.btn-primary:hover,
|
|
.btn[style*="background-color: #35245b"]:hover {
|
|
background-color: var(--fluent-primary-light) !important;
|
|
border-color: var(--fluent-primary-light) !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--fluent-shadow-small);
|
|
}
|
|
|
|
.btn-primary:active,
|
|
.btn[style*="background-color: #35245b"]:active {
|
|
background-color: var(--fluent-primary-dark) !important;
|
|
border-color: var(--fluent-primary-dark) !important;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Botón secundario */
|
|
.bg-primary-subtle {
|
|
background-color: #f3e5f5 !important;
|
|
color: var(--fluent-primary) !important;
|
|
border-color: var(--fluent-primary) !important;
|
|
}
|
|
|
|
.bg-primary-subtle:hover {
|
|
background-color: #e1bee7 !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--fluent-shadow-small);
|
|
}
|
|
|
|
.btn:disabled {
|
|
background-color: #f3f2f1 !important;
|
|
color: var(--fluent-text-secondary) !important;
|
|
border-color: #e1dfdd !important;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ==================== Checkboxes ==================== */
|
|
.form-check {
|
|
margin: 24px 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.form-check-input {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 12px;
|
|
border: 2px solid var(--fluent-border);
|
|
border-radius: 3px;
|
|
background-color: var(--fluent-surface);
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--fluent-primary);
|
|
border-color: var(--fluent-primary);
|
|
}
|
|
|
|
.form-check-input:focus {
|
|
box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
.form-check-label {
|
|
cursor: pointer;
|
|
color: var(--fluent-text-primary);
|
|
line-height: 1.5;
|
|
font-size: 0.875rem;
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.form-check-label a {
|
|
color: var(--fluent-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.form-check-label a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ==================== Datalist ==================== */
|
|
datalist {
|
|
background-color: var(--fluent-surface);
|
|
border: 1px solid var(--fluent-border);
|
|
border-radius: var(--fluent-radius-small);
|
|
box-shadow: var(--fluent-shadow-small);
|
|
}
|
|
|
|
/* ==================== Header con logo ==================== */
|
|
div[style*="background-color: #211b52"] {
|
|
background: linear-gradient(135deg, #211b52 0%, #35245b 100%) !important;
|
|
padding: 16px 20px;
|
|
box-shadow: var(--fluent-shadow-small);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
div[style*="background-color: #211b52"] img {
|
|
height: 4rem !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* ==================== Mensaje de error ==================== */
|
|
#mensaje-error {
|
|
margin-top: 16px;
|
|
padding: 12px 16px;
|
|
border-radius: var(--fluent-radius-small);
|
|
background-color: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
color: #991b1b;
|
|
font-size: 0.875rem;
|
|
display: none;
|
|
}
|
|
|
|
#mensaje-error.show {
|
|
display: block;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ==================== Responsividad ==================== */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.card {
|
|
margin: 0 auto;
|
|
border-radius: var(--fluent-radius-medium);
|
|
}
|
|
|
|
.card-body {
|
|
padding: 24px 20px !important;
|
|
}
|
|
|
|
form {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
padding: 14px 16px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 14px 24px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
div[style*="background-color: #211b52"] {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
div[style*="background-color: #211b52"] img {
|
|
height: 3.5rem !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.card-body {
|
|
padding: 20px 16px !important;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select,
|
|
.btn {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.375rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ==================== Utilidades ==================== */
|
|
.border-dark-subtle {
|
|
/* Las clases border se manejan en los selectores específicos */
|
|
}
|
|
|
|
.rounded,
|
|
.rounded-3 {
|
|
/* Las clases rounded se manejan en los selectores específicos */
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* ==================== Animaciones suaves ==================== */
|
|
* {
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
/* ==================== Estados de focus para accesibilidad ==================== */
|
|
.form-control:focus-visible,
|
|
.form-select:focus-visible,
|
|
.btn:focus-visible,
|
|
.form-check-input:focus-visible {
|
|
outline: 2px solid var(--fluent-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ==================== Mejoras de UX ==================== */
|
|
.form-control:invalid:not(:focus):not(:placeholder-shown) {
|
|
border-color: #dc3545 !important;
|
|
background-color: #fef2f2;
|
|
}
|
|
|
|
.form-select:invalid:not(:focus) {
|
|
border-color: #dc3545 !important;
|
|
background-color: #fef2f2;
|
|
}
|
|
|
|
/* Loading state para botones */
|
|
.btn.loading {
|
|
position: relative;
|
|
color: transparent !important;
|
|
}
|
|
|
|
.btn.loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid transparent;
|
|
border-top: 2px solid currentColor;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
color: white;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|