/**
 * ESTILOS CORPORATIVOS LAOOAL DENTAL
 * Guía de Marca Visual v1.0
 * Personalización completa del frontend con identidad visual Laooal
 */

:root {
  /* === PALETA CORPORATIVA LAOOAL === */
  
  /* Colores Primarios */
  --laooal-primary: #4E6566;           /* Verde Oliva - Logo, elementos principales */
  --laooal-primary-light: #6F8586;     /* Verde Oliva Claro */
  --laooal-accent: #9A9943;            /* Oro - CTA, destacados */
  --laooal-accent-dark: #7A7A2E;       /* Oro Oscuro - Hover, interactividad */
  
  /* Colores Secundarios */
  --laooal-blue-purple: #6ca1da;       /* Azul-Púrpura - Profesionalismo */
  --laooal-blue-purple-dark: #6465eb;  /* Azul-Púrpura Oscuro */
  --laooal-naranja: #ff9800;           /* Naranja - Alertas, energía */
  --laooal-purple: #a664e2;            /* Púrpura - Innovación */
  --laooal-cyan: #0093e9;              /* Cian - Información, tecnología */
  --laooal-turquesa: #80d0c7;          /* Turquesa - Datos, estabilidad */
  
  /* Colores Neutros */
  --laooal-bg: #F5F5F5;                /* Fondo claro */
  --laooal-surface: #FFFFFF;           /* Superficie blanca */
  --laooal-text-dark: #2E3A3B;         /* Texto oscuro */
  --laooal-text-light: #7A8A8B;        /* Texto suave */
  --laooal-border: #D0D8D8;            /* Borde estándar */
  
  /* Colores de Estado */
  --laooal-success: #28a745;           /* Verde - Éxito */
  --laooal-error: #dc3545;             /* Rojo - Error */
  --laooal-warning: #ff9800;           /* Naranja - Advertencia */
  --laooal-info: #0093e9;              /* Azul - Información */
  
  /* Tipografía */
  --laooal-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --laooal-font-size-base: 13px;
  --laooal-font-size-small: 11px;
  --laooal-font-weight-normal: 400;
  --laooal-font-weight-medium: 500;
  --laooal-font-weight-semibold: 600;
  
  /* Espaciado */
  --laooal-spacing-xs: 4px;
  --laooal-spacing-sm: 8px;
  --laooal-spacing-md: 16px;
  --laooal-spacing-lg: 24px;
  --laooal-spacing-xl: 32px;
  
  /* Sombras */
  --laooal-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --laooal-shadow-md: 0 4px 25px rgba(0, 0, 0, 0.2);
  --laooal-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3);
  
  /* Border radius */
  --laooal-radius-sm: 4px;
  --laooal-radius-md: 6px;
  --laooal-radius-lg: 8px;
}

/* === APLICACIÓN GLOBAL DE ESTILOS === */

body {
  font-family: var(--laooal-font-family);
  font-size: var(--laooal-font-size-base);
  color: var(--laooal-text-dark);
  background-color: var(--laooal-bg);
}

/* Botones Primarios - Oro Corporativo */
.v-btn.v-btn--is-elevated:not(.v-btn--outlined):not(.v-btn--text),
.btn-primary,
.v-btn.primary {
  background-color: var(--laooal-accent) !important;
  color: #FFFFFF !important;
  font-weight: var(--laooal-font-weight-medium);
  transition: all 0.3s ease;
}

.v-btn.v-btn--is-elevated:not(.v-btn--outlined):not(.v-btn--text):hover,
.btn-primary:hover,
.v-btn.primary:hover {
  background-color: var(--laooal-accent-dark) !important;
  box-shadow: 0 4px 12px rgba(154, 153, 67, 0.3);
  transform: translateY(-2px);
}

.v-btn.v-btn--is-elevated:not(.v-btn--outlined):not(.v-btn--text):disabled,
.btn-primary:disabled {
  background-color: #9CA3AF !important;
  opacity: 0.6;
}

/* Botones Secundarios - Contorno Verde Primario */
.v-btn.v-btn--outlined,
.btn-secondary {
  border-color: var(--laooal-primary) !important;
  color: var(--laooal-primary) !important;
  font-weight: var(--laooal-font-weight-medium);
  transition: all 0.3s ease;
}

.v-btn.v-btn--outlined:hover,
.btn-secondary:hover {
  background-color: var(--laooal-bg);
  border-color: var(--laooal-text-dark) !important;
  color: var(--laooal-text-dark) !important;
}

/* Inputs y campos de formulario */
input,
textarea,
.v-text-field,
.v-select {
  font-family: var(--laooal-font-family);
  font-size: var(--laooal-font-size-base);
}

.v-text-field.v-input--is-focused .v-input__underline::before {
  border-color: var(--laooal-primary) !important;
}

.v-text-field .v-input__underline::after {
  border-color: var(--laooal-accent) !important;
}

/* Cards y Contenedores */
.v-card,
.card {
  background-color: var(--laooal-surface);
  border: 1px solid var(--laooal-border);
  border-radius: var(--laooal-radius-lg);
  box-shadow: var(--laooal-shadow-md);
  transition: all 0.3s ease;
}

.v-card:hover,
.card:hover {
  box-shadow: var(--laooal-shadow-lg);
 /* transform: translateY(-2px);*/
}

/* Headers y AppBar */
.v-app-bar,
.header {
  background: linear-gradient(to right, var(--laooal-surface), var(--laooal-bg)) !important;
  border-bottom: 1px solid var(--laooal-border);
  box-shadow: var(--laooal-shadow-sm);
}

.v-app-bar .v-toolbar__title {
  color: var(--laooal-primary);
  font-weight: var(--laooal-font-weight-semibold);
  font-size: 18px;
}

/* Badges y Etiquetas */
.v-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--laooal-spacing-xs);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--laooal-font-size-small);
  font-weight: var(--laooal-font-weight-medium);
  text-transform: uppercase;
}

.badge-success {
  background-color: #d1f2d1;
  color: #1b5e20;
}

.badge-warning {
  background-color: #fff3cd;
  color: #856404;
}

.badge-error {
  background-color: #f8d7da;
  color: #721c24;
}

.badge-info {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* Indicadores de Estado */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-indicator.running {
  background-color: var(--laooal-success);
}

.status-indicator.stopped {
  background-color: #9CA3AF;
}

.status-indicator.error {
  background-color: var(--laooal-error);
}

.status-indicator.pending {
  background-color: var(--laooal-warning);
}

/* Enlaces */
a,
.v-link {
  color: var(--laooal-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
.v-link:hover {
  color: var(--laooal-accent-dark);
  text-decoration: underline;
}

/* Modales y Diálogos */
.v-dialog,
.modal {
  box-shadow: var(--laooal-shadow-lg);
}

.v-dialog .v-card,
.modal-content {
  background-color: var(--laooal-surface);
  border: 1px solid var(--laooal-border);
}

.v-dialog .v-card__title,
.modal-header {
  background-color: var(--laooal-bg);
  color: var(--laooal-primary);
  border-bottom: 1px solid var(--laooal-border);
  font-weight: var(--laooal-font-weight-semibold);
}

/* Tablas */
.v-data-table,
table {
  background-color: var(--laooal-surface);
}

.v-data-table thead th,
table thead th {
  background-color: var(--laooal-bg) !important;
  color: var(--laooal-primary) !important;
  font-weight: var(--laooal-font-weight-semibold);
  border-bottom: 2px solid var(--laooal-accent);
}

.v-data-table tbody tr:hover {
  background-color: rgba(78, 101, 102, 0.05) !important;
}

/* Gradientes Corporativos */
.gradient-primary {
  background: linear-gradient(118deg, var(--laooal-blue-purple), var(--laooal-blue-purple-dark));
}

.gradient-accent {
  background: linear-gradient(118deg, var(--laooal-accent), var(--laooal-accent-dark));
}

.gradient-warm {
  background: linear-gradient(260deg, rgb(253, 160, 133), rgb(246, 211, 101));
}

/* Animaciones */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsividad */
@media (max-width: 768px) {
  :root {
    --laooal-spacing-lg: 16px;
    --laooal-spacing-xl: 24px;
  }
  
  body {
    font-size: var(--laooal-font-size-small);
  }
}

/* Accesibilidad - Focus visible */
*:focus-visible {
  outline: 2px solid var(--laooal-accent);
  outline-offset: 2px;
}

/* Deshabilitado */
:disabled,
.disabled,
[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  color: var(--laooal-text-light) !important;
}