/* === MDC Custom Themed Framework === */

/* --- Variables CSS Globales --- */
:root {
  /* Colores Base (Tema Claro por defecto) */
  --background: 0 0% 100%;
  /* Blanco */
  --foreground: 240 10% 3.9%;
  /* Negro/Gris muy oscuro */
  --card: 0 0% 100%;
  /* Blancas */
  --card-foreground: 240 10% 3.9%;
  /* Texto oscuro en tarjetas */
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 120 33% 50%;
  /* Verde #58aa54 */
  --primary-foreground: 0 0% 98%;
  /* Texto claro para fondos primarios */
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  /* Gris para texto muted */
  --accent: 120 33% 50%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 84.2% 60.2%;
  /* Rojo */
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  /* Borde gris claro */
  --input: 240 5.9% 90%;
  /* Borde para inputs */
  --ring: 120 33% 50%;
  /* Para focus rings (potencialmente) */
  --radius: 0.5rem;
  --green-foreground: 90 44% 96%;
  /* Variables de Hover para Tema Claro */
  --hover-neutral-bg: 240 6% 93%;
  /* Gris un poco más visible para hover sobre fondos claros/blancos */
  --hover-primary-bg: 120 33% 45%;
  /* Primario ligeramente más oscuro para hover en botones primarios */
  --hover-on-dark-element-bg: 0 0% 15%;
  /* --hover-on-dark-element-bg: 0 0% 15%;  (Opcional, si tienes elementos oscuros en tema claro) */
  /* --hover-text-on-accent: 0 0% 98%;      (Opcional, si el texto sobre acento cambia en hover) */
}

/* --- Tema Oscuro --- */
.dark-theme {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 3.7% 15.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 20%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --primary: 120 33% 50%;
  --primary-foreground: 0 0% 98%;
  --input: 240 3.7% 25%;
  --secondary: 240 3.7% 15.9%;
  /* Asegurar que secondary también se defina para dark-theme */
  --secondary-foreground: 0 0% 98%;
  --destructive: 0 70% 45%;
  --destructive-foreground: 0 0% 98%;
  --accent: 120 33% 50%;
  --accent-foreground: 0 0% 98%;
  --ring: 120 33% 50%;

  /* Variables de Hover para Tema Oscuro */
  --hover-neutral-bg: 240 3.7% 22%;
  --hover-primary-bg: 120 33% 45%;

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  --green-foreground: 90 15% 10%;
}

/* --- Estilos Base --- */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
}


/* --- Componentes de Layout --- */
.container {
  /* Para centrar contenido con ancho máximo */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  /* Equivalente a px-4 de Tailwind */
  padding-right: 1rem;
  /* Equivalente a px-4 de Tailwind */
  max-width: 80rem;
  /* container max-w-7xl de Tailwind es 80rem */
}

.full-width {
  /* Ocupa todo el ancho disponible */
  width: 100%;
}

/* --- Tipografía --- */
.heading-1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  /* Similar a text-4xl font-bold */
}

.heading-2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  /* Similar a text-3xl font-bold */
}

.heading-3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  /* Similar a text-2xl font-semibold */
}

.text-muted {
  color: hsl(var(--muted-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.highlight {
  color: hsl(var(--primary));
  font-weight: 700;
}

.link {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover {
  text-decoration: underline;
}

/* --- Botones --- */
.btn {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 500;
  /* Tailwind font-medium */
  padding: 0.5rem 1rem;
  /* Tailwind py-2 px-4 */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  /* Borde base para consistencia */
  text-decoration: none;
  /* Para asegurar que <a> como botones no tengan subrayado */
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.btn-primary:hover {
  background-color: hsl(var(--hover-primary-bg));
  border-color: hsl(var(--hover-primary-bg));
  /* Ajustar borde también */
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

.btn-secondary:hover {
  background-color: hsl(var(--hover-neutral-bg));
  border-color: hsl(var(--muted-foreground));
  /* O un borde de hover más específico */
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-color: hsl(var(--destructive));
}

.btn-destructive:hover {
  filter: brightness(90%);
  /* Mantener simple por ahora o crear variable --hover-destructive-bg */
}

.btn-outline {
  /* Default (Light Theme) */
  color: hsl(var(--foreground));
  background-color: transparent;
  border-color: hsl(var(--border));
}

.btn-outline:hover {
  /* Default (Light Theme) Hover */
  color: hsl(var(--background));
  background-color: hsl(var(--green-foreground));
  border-color: #5EA500;
  color: black;
}

/* Dark Theme Overrides for btn-outline */
.dark-theme .btn-outline {
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

.dark-theme .btn-outline:hover {
  color: hsl(var(--background));
  background-color: hsl(var(--green-foreground));
  border-color: #5EA500;
  color: white;
}

.btn-ghost {
  /* Botón transparente, útil para iconos o acciones sutiles */
  background-color: transparent;
  color: hsl(var(--foreground));
  /* Usa el color de texto principal */
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: hsl(var(--hover-neutral-bg));
}

/* --- Tarjetas --- */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  overflow: visible;
  /* Para que el contenido no se salga si tiene border-radius */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* Sombra sutil de Tailwind */
}

.card-header,
.card-body,
.card-footer {
  padding: 1rem;
  /* Tailwind p-4 */
}

.card-header {
  border-bottom: 1px solid hsl(var(--border));
}

.card-footer {
  border-top: 1px solid hsl(var(--border));
}

/* --- Alertas --- */
.alert {
  border-radius: var(--radius);
  padding: 1rem;
  /* Tailwind p-4 */
  margin-bottom: 1rem;
  /* Tailwind mb-4 */
  border-left-width: 4px;
  border-left-style: solid;
}

.alert-info {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--primary));
  color: hsl(var(--foreground));
}

.alert-danger {
  background-color: hsl(var(--destructive));
  border-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

/* Se pueden añadir .alert-warning, .alert-error si se necesitan */

/* --- Navegación (para tabs) --- */
.nav-tabs {
  /* Contenedor para los enlaces de tabs */
  display: flex;
  gap: 0.5rem;
  /* Tailwind gap-2 */
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 1rem;
  /* Tailwind mb-4 */
}

.nav-item {
  /* Enlace individual de tab */
  padding: 0.5rem 1rem;
  /* Tailwind py-2 px-4 */
  color: hsl(var(--muted-foreground));
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  /* Para que el borde activo se solape con el borde del contenedor */
  transition: color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.nav-item:hover {
  color: hsl(var(--foreground));
  /* El texto se vuelve más prominente */
  background-color: hsl(var(--hover-neutral-bg));
  /* Fondo hover sutil */
}

.nav-item.active {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
  font-weight: 500;
  /* Tailwind font-medium */
}

/* --- Tablas --- */
.table-container {
  /* Para hacer la tabla responsive horizontalmente si es necesario */
  width: 100%;
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* Importante para que los bordes se unan */
  text-align: left;
  /* Alineación base del texto */
}

.table th,
.table td {
  padding: 0.75rem 1rem;
  /* Tailwind py-3 px-4 */
  border-bottom: 1px solid hsl(var(--border));
}

.table th {
  /* Encabezados de tabla */
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  /* Tailwind font-medium */
  background-color: hsl(var(--muted));
  /* Fondo sutil para encabezados */
}

.table tbody tr:last-child td {
  /* Quitar borde inferior de la última fila */
  border-bottom: none;
}

.table tbody tr:hover {
  background-color: hsl(var(--hover-neutral-bg));
}

/* --- Inputs (Básico) --- */
.input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* Tailwind py-2 px-3 */
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  height: 2.5rem;
  /* Altura fija consistente para todos los inputs */
  line-height: 1.5;
}

/* Asegurar que select también tenga la misma altura */
select.input {
  height: 2.5rem !important;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  /* Espacio para la flecha */
}

.input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.2);
  /* Ring sutil al hacer focus */
}

.dark-theme .input:focus {
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.3);
}

.theme-option-selected {
  background-color: hsla(var(--primary), 0.15);
  border: 1px solid hsl(var(--primary));
}

.dark-theme .theme-option-selected {
  background-color: hsla(var(--primary), 0.25);
  border-color: hsl(var(--primary));
}

/* Custom Radio Button Styling */
input[type="radio"].theme-radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid hsl(var(--border));
  position: relative;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

input[type="radio"].theme-radio:checked {
  border-color: hsl(var(--primary));
}

input[type="radio"].theme-radio:checked::before {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: hsl(var(--primary));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="radio"].theme-radio:focus {
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.3);
}

.dark-theme input[type="radio"].theme-radio {
  border: 2px solid hsl(var(--border));
}

.dark-theme input[type="radio"].theme-radio:checked {
  border-color: hsl(var(--primary));
}

.dark-theme input[type="radio"].theme-radio:checked::before {
  background-color: hsl(var(--primary));
}

/* Utility class for custom font family */
.shadcn-font {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Utility class for centering text */
.text-center {
  text-align: center;
}

/* --- Font Size Utility Classes --- */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

/* --- Font Weight Utility Classes --- */
.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* --- Line Height Utility Classes --- */
.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

/* --- Checkbox Styling --- */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  background-color: hsl(var(--background));
}

input[type="checkbox"]:hover {
  border-color: hsl(var(--primary));
}

input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.3);
  border-color: hsl(var(--primary));
}

input[type="checkbox"]:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

input[type="checkbox"]:checked::before {
  content: '';
  display: block;
  width: 0.375rem;
  height: 0.625rem;
  border: solid hsl(var(--primary-foreground));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 0.0625rem;
  left: 0.25rem;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: hsl(var(--muted-foreground));
}

input[type="checkbox"]:disabled:checked {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--muted-foreground));
}

/* Dark theme specific checkbox styles */
.dark-theme input[type="checkbox"] {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
}

.dark-theme input[type="checkbox"]:hover {
  border-color: hsl(var(--primary));
}

.dark-theme input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.4);
}

.dark-theme input[type="checkbox"]:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.dark-theme input[type="checkbox"]:checked::before {
  border-color: hsl(var(--primary-foreground));
}

.dark-theme select option:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Custom Select & Option Styling */

/* Clase para mostrar el texto del select en color muted cuando no hay nada seleccionado */
.select-placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/*
  Nota: Estilizar las opciones de un <select> es muy inconsistente entre navegadores.
  Estos estilos pueden no funcionar igual en Chrome, Safari, y Firefox,
  especialmente el color de fondo en hover y en el estado seleccionado.
*/
select option {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

select option:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

select option:checked {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* --- Custom Dropdown Component --- */
.form-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger {
  /* This is a button, but styled like an input */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: inherit;
  height: 2.5rem;
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease;
}

.dropdown-trigger:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.2);
}

/* Style for when a filter is active (i.e., not a placeholder) */
.dropdown-trigger:not(.dropdown-trigger-placeholder)>span {
  color: #5EA500;
  /* A vibrant, eye-catching green */
  font-weight: 500;
}

/* Class to apply when the placeholder is shown */
.dropdown-trigger-placeholder {
  color: hsl(var(--muted-foreground));
}

.dropdown-menu {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  width: 100%;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  overflow: auto;
  max-height: 20rem;
  /* prevent overly long dropdowns */
  display: none;
  /* Hidden by default */
}

.dropdown-menu.open {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  border: none;
  background: none;
  color: inherit;
}

.dropdown-item:hover,
.dropdown-item[aria-selected="true"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  outline: none;
}

.dropdown-item:disabled {
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
  background-color: transparent !important;
  opacity: 0.7;
}