/*
  TEMA GLOBAL DE PRUEBA - Materialize override
  Referencia visual: Tailwind / Flowbite
  Propósito: modernizar botones y componentes base sin tocar las páginas .php.
  Rollback: comentar este bloque completo o eliminar la inclusión desde libreria01.php.
  Fecha: 2026-09-01
*/

:root {
  --theme-primary: #2563eb;
  --theme-primary-dark: #1d4ed8;
  --theme-primary-soft: rgba(37, 99, 235, 0.12);
  --theme-on-primary: #ffffff;
  --theme-surface: #f8fafc;
  --theme-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* Botones base - cambio de prueba */
.btn,
.btn-large,
.btn-small,
.btn-floating,
button.btn,
a.btn {
  border-radius: 0.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  /* Se evita fijar background/color para no anular las utilidades de color de Materialize */
}

.btn:hover,
.btn-large:hover,
.btn-small:hover,
button.btn:hover,
a.btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.62);
}

.btn:focus,
.btn-large:focus,
.btn-small:focus,
.btn-floating:focus,
button.btn:focus,
a.btn:focus {
  outline: 3px solid rgba(15, 23, 42, 0.18);
}

.btn-flat,
.btn-flat:hover {
  box-shadow: none;
}

.btn-floating {
  border-radius: 50%;
}

/* Estado secundario, útil para pruebas rápidas */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  color: #ffffff;
}

/* Cards - ajuste sutil de redondeo */
.card,
.card-panel,
.card-content,
.card-image,
.card-action,
.card .card-content,
.card .card-action,
.card .card-image {
  border-radius: 0.75rem;
}

/*
  FIN TEMA GLOBAL DE PRUEBA
*/






/* Dropdown / menú */
.dropdown-content {
  min-width: 200px;
  max-height: 450px !important; /* Limita la altura del desplegable */
  overflow-y: auto !important;   /* Habilita el scroll vertical cuando hay muchos ítems */
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.85rem;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
  /* Forzamos padding uniforme en los laterales con !important para anular Materialize */
  padding: 0.35rem 0.45rem !important;
  z-index: 1200;
  transform: translateY(-3rem);
}

/* Scrollbar personalizado para el dropdown */
.dropdown-content::-webkit-scrollbar {
  width: 6px;
}
.dropdown-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-trigger {
  position: relative;
  z-index: 1;
}

.dropdown-content li {
  min-height: 0;
  width: 100%;
  clear: both;
  margin: 0;
  padding: 0 !important; /* Resetea el padding interno que Materialize aplica a los li */
}

.dropdown-content li > a,
.dropdown-content li > span {
  box-sizing: border-box; /* Asegura que el padding no desborde el ancho */
  width: 100%;
  margin: 0;
  color: #334155;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-content li:hover,
.dropdown-content li.active {
  background: transparent;
}

.dropdown-content li > a:hover,
.dropdown-content li > a:focus {
  background: rgba(37, 99, 235, 0.18);
  color: #0f172a;
}

.dropdown-content li.divider {
  margin: 0.35rem 0;
  height: 1px;
  background: rgba(148, 163, 184, 0.25);
}





/* TEST INPUT FIELD */
/* 1. Contenedor del input */
.input-field {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* 2. Estilo del Input (Borde completo + Rounded) */
.input-field input[type=text]:not(.browser-default),
.input-field input[type=password]:not(.browser-default),
.input-field input[type=email]:not(.browser-default),
.input-field input[type=number]:not(.browser-default),
.input-field input[type=date]:not(.browser-default),
.input-field input.datepicker:not(.browser-default),
.input-field input[type=search]:not(.browser-default) {
  border: 1.5px solid #cbd5e1 !important; /* Borde suave completo */
  border-radius: 0.5rem !important;        /* Esquinas redondeadas */
  box-sizing: border-box !important;
  height: 3rem !important;
  padding: 0 0.85rem !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 2b. Estilo específico para Textarea (Auto-expandible y con padding vertical) */
.input-field textarea.materialize-textarea {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
  min-height: 3rem !important; /* Altura inicial cómoda */
  height: auto;
  padding: 0.75rem 0.85rem !important; /* Padding interno completo */
  background-color: transparent !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  overflow-y: auto !important; /* Scroll suave si supera la altura */
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}


/* 3. Comportamiento en Focus (Borde activo) */
.input-field input[type=text]:not(.browser-default):focus,
.input-field input[type=password]:not(.browser-default):focus,
.input-field input[type=email]:not(.browser-default):focus,
.input-field input[type=number]:not(.browser-default):focus,
.input-field input[type=date]:not(.browser-default):focus,
.input-field input.datepicker:not(.browser-default):focus,
.input-field input[type=search]:not(.browser-default):focus,
.input-field textarea.materialize-textarea:focus {
  border: 2px solid #00897b !important; /* Color principal (reemplaza por el tuyo) */
  border-bottom: 2px solid #00897b !important; /* Materialize fuerza el border-bottom, lo igualamos */
  box-shadow: 0 0 0 1px #00897b !important;
}

/* 4. Posicionamiento del Label por defecto */
/*
  FIX 2026-09-03: Se cambió el selector descendiente ".input-field label" por
  combinador de hermanos ("input ~ label"), igual patrón que ya se usaba para
  select/date más abajo. Motivo: ".input-field label" también capturaba los
  labels que ENVUELVEN checkboxes/radios (<label><input type="checkbox">...</label>),
  aplicándoles pointer-events:none y position absoluta, lo que impedía hacer
  click en el checkbox. Ver detalle completo en css.md, sección "Bug: checkbox
  no reacciona al click dentro de .input-field".
  Rollback: revertir a ".input-field label" (no recomendado, reintroduce el bug).
*/
.input-field input[type=text] ~ label,
.input-field input[type=password] ~ label,
.input-field input[type=email] ~ label,
.input-field input[type=number] ~ label,
.input-field input[type=date] ~ label,
.input-field input.datepicker ~ label,
.input-field input[type=search] ~ label,
.input-field textarea.materialize-textarea ~ label {
  left: 1.5rem !important;
  top: 0.7rem !important;
  transform: translateY(0);
  pointer-events: none;
  transition: transform 0.15s ease, color 0.15s ease, font-size 0.15s ease !important;
  background-color: transparent;
  padding: 0 0.25rem !important;
  z-index: 1;
}

/* 5. Label flotante cuando está activo (Focus o con Texto) */
.input-field input[type=text] ~ label.active,
.input-field input[type=password] ~ label.active,
.input-field input[type=email] ~ label.active,
.input-field input[type=number] ~ label.active,
.input-field input[type=date] ~ label.active,
.input-field input.datepicker ~ label.active,
.input-field input[type=search] ~ label.active,
.input-field textarea.materialize-textarea ~ label.active {
  transform: translateY(-1.35rem) !important;
  font-size: 0.8rem !important; /* Achicamos directamente la fuente para no arrastrar un width phantom */
  background-color: #ffffff !important; 
  color: #00897b !important;
  z-index: 2;
  width: max-content !important; /* Ajusta la caja al texto exacto */
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* 6. Corrección para helper text o validaciones si las usas */
.input-field .helper-text {
  padding-left: 0.85rem;
  margin-top: -0.65rem !important; /* Acerca el texto al borde inferior */
}


/* Forzar que las etiquetas de los selects se posicionen arriba como los campos con texto */
.input-field select ~ label,
.input-field .select-wrapper ~ label {
  transform: translateY(-1.35rem) !important;
  transform-origin: 0 0 !important;
  background-color: #ffffff !important; /* Ajusta según el color de fondo de tu formulario */
  color: #00897b !important;
  padding: 0 4px !important;
  z-index: 1 !important;
}

/* Corrección para campos con icono prefix */
.input-field .prefix ~ input[type=search] {
  margin-left: 3rem !important;
  width: calc(100% - 3rem) !important;
}

.input-field .prefix {
  top: 0.75rem !important;
  left: 0.75rem !important;
}

/* Forzar label arriba en inputs de tipo date y datepicker */
.input-field input[type=date] ~ label,
.input-field input.datepicker ~ label {
  transform: translateY(-1.35rem) !important;
  font-size: 0.8rem !important;
  background-color: #ffffff !important;
  color: #00897b !important;
  font-weight: 600;
  z-index: 2;
  width: max-content !important;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}