/* Estilos personalizados para Certificados UNIZAR - Diseño Original */

/* Declaraciones de fuentes Myriad Pro */
@font-face {
  font-family: 'Myriad Pro';
  src: url("../fonts/MyriadPro-Regular.d75d7f70aa16.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Myriad Pro';
  src: url("../fonts/MyriadPro-Bold.bfc84fcb6a1c.otf") format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Myriad Pro';
  src: url("../fonts/MyriadPro-Semibold.86bb1295004f.otf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Colores base como en la imagen original */
:root {
  --unizar-gray: #4a5568;
  --unizar-light-gray: #e2e8f0;
  --unizar-orange: #d97706;
  --unizar-green: #48bb78;
  --unizar-beige: #f5f5dc;
}

body {
  font-family: 'Myriad Pro', 'Inter', sans-serif;
}

/* Header estilo original */
header {
  background-color: white;
  border-bottom: 2px solid #2d3748;
}

/* Logo UNIZAR simplificado */
.unizar-logo {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tarjeta principal */
.main-card {
  background-color: var(--unizar-light-gray);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Header de la tarjeta */
.card-header {
  background-color: #223d71;
  color: white;
  padding: 12px 24px;
  border-radius: 8px 8px 0 0;
}

/* Texto explicativo en naranja */
.explanatory-text {
  color: var(--unizar-orange);
  font-size: 14px;
  line-height: 1.5;
}

/* Campo de entrada URN */
.urn-input {
  border: 2px solid var(--unizar-green);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

.urn-input:focus {
  outline: none;
  border-color: #38a169;
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

/* Botón de validación */
.validate-button {
  background-color: var(--unizar-light-gray);
  color: var(--unizar-gray);
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: 8px 24px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.validate-button:hover {
  background-color: #d1d5db;
}

.validate-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mensajes de estado */
.message-error {
  background-color: #fed7d7;
  border: 1px solid #feb2b2;
  color: #c53030;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}

.message-success {
  background-color: #c6f6d5;
  border: 1px solid #9ae6b4;
  color: #2f855a;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}

/* Resultados de validación */
.validation-results {
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 16px;
  margin-top: 24px;
}

.validation-results h3 {
  color: var(--unizar-gray);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}

.result-label {
  font-weight: 500;
  color: var(--unizar-gray);
}

.result-value {
  color: #2d3748;
}

.result-value.valid {
  color: var(--unizar-green);
  font-weight: 500;
}

.result-value.verified {
  color: #3182ce;
  font-weight: 500;
}

/* Footer */
footer {
  background-color: white;
  border-top: 1px solid #e2e8f0;
  color: var(--unizar-gray);
}

/* Las dos líneas del pie, con la medida de Ágora: letra menor que la del resto
   de la página y apenas tres píxeles de aire entre ellas. */
footer p { margin: 0 0 3px; }
footer p:last-child { margin-bottom: 0; }
.pie-principal { font-size: 0.8em; }
.pie-linea { font-size: 0.7em; }
/* Los guiones de la segunda línea son adorno, así que su aire se pone aquí y no
   en el texto traducible. */
.pie-separador { padding: 0 0.5em; }

/* Responsive */
@media (max-width: 640px) {
  .urn-input-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .urn-input-container label {
    margin-bottom: 8px;
  }

  .urn-input-container .flex-1 {
    width: 100%;
    max-width: 100%;
  }

  .urn-input {
    width: 100% !important;
    max-width: 100%;
  }

  .result-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Animaciones simples */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón de login de administrador */
.admin-login-btn {
  background-color: #223d71;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-login-btn:hover {
  background-color: #2e5194;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.admin-login-btn:active {
  transform: translateY(0);
}


/* Estilos para el logo UNIZAR más detallado */
.unizar-crest {
  width: 24px;
  height: 16px;
  background-color: var(--unizar-gray);
  border-radius: 2px;
  position: relative;
}

.unizar-crest::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 1px;
}

.unizar-year {
  font-size: 10px;
  font-weight: bold;
  color: var(--unizar-gray);
  text-align: center;
  margin-top: 2px;
}

/* Botón de descarga de certificado */
.download-button {
  background-color: var(--unizar-green);
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-button:hover {
  background-color: #38a169;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  color: white;
  text-decoration: none;
}

.download-button:active {
  transform: translateY(0);
}

/* Estilos para la tabla de resultados de búsqueda */
.search-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-results-table th {
  background-color: #223d71;
  color: white;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-results-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  color: #2d3748;
}

.search-results-table tr:hover {
  background-color: #f7fafc;
}

.search-results-table tr:last-child td {
  border-bottom: none;
}

/* Contenedor de tabla con scroll horizontal */
.table-container {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive para tabla */
@media (max-width: 768px) {
  .search-results-table {
    font-size: 12px;
  }
  
  .search-results-table th,
  .search-results-table td {
    padding: 8px 12px;
  }
  
  .search-results-table th:nth-child(3),
  .search-results-table td:nth-child(3) {
    max-width: 150px;
  }
}

/* Estilos para la página de resultados */
.filters-applied {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.filter-tag {
  display: inline-block;
  background-color: #dbeafe;
  color: #1e40af;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin: 2px;
}

.results-count {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 16px;
}

.results-count strong {
  color: #374151;
  font-weight: 600;
}

/* Estilos para el mensaje de no resultados */
.no-results {
  text-align: center;
  padding: 40px 20px;
}

.no-results svg {
  color: #9ca3af;
  margin: 0 auto 16px;
}

.no-results h3 {
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.no-results p {
  color: #6b7280;
  margin-bottom: 16px;
}

.suggestions {
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
}

.suggestions ul {
  list-style-type: disc;
  padding-left: 20px;
}

.suggestions li {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Estilos mejorados para paginación */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.pagination a,
.pagination span {
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #374151;
  background-color: white;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.875rem;
  min-width: 2.5rem;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.pagination a:hover {
  background-color: #f8fafc;
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.pagination .current {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-color: #3b82f6;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
}

.pagination .disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background-color: #f9fafb;
  border-color: #e5e7eb;
  opacity: 0.6;
}

.pagination .disabled:hover {
  transform: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Estilos mejorados para información de resultados */
.results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.results-count p {
  margin: 0;
  font-weight: 600;
  color: #1e293b;
}

.pagination-info p {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

/* Estilos mejorados para títulos largos */
.title-cell {
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  hyphens: auto;
}

/* Estilos mejorados para la tabla */
.search-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  background-color: white;
  border-radius: 0.75rem;
  overflow: hidden;
}

.search-results-table th {
  background-color: #223d71;
  font-weight: 700;
  color: white;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #223d71;
  vertical-align: top;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
  margin-top: 0;
}

.search-results-table th:hover {
  background-color: #2e5194;
}

.search-results-table th.sortable::after {
  content: '↕';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #cbd5e1;
  transition: color 0.2s ease;
  font-weight: bold;
}

.search-results-table th.sortable:hover::after {
  color: white;
}

.search-results-table th.sorted-asc::after {
  content: '↑';
  color: #60a5fa;
  font-weight: bold;
}

.search-results-table th.sorted-desc::after {
  content: '↓';
  color: #60a5fa;
  font-weight: bold;
}

.search-results-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}

.search-results-table tr:hover {
  background-color: #f1f5f9;
  transition: background-color 0.2s ease;
}

.search-results-table tr:last-child td {
  border-bottom: none;
}

.table-container {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: white;
}

/* ==========================================================================
   Botón corporativo
   --------------------------------------------------------------------------
   Reemplaza a los bloques `style="padding: 12px 24px; ..."` con
   `onmouseover`/`onmouseout` que se repetían en las plantillas. Los valores
   son los mismos que llevaban en línea.
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-danger-outline,
.btn-outline-dark {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  text-decoration: none;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-danger-outline:hover,
.btn-outline-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* Azul corporativo sobre fondo sólido */
.btn-primary {
  border: none;
  background-color: #223d71;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #2e5194;
  color: #ffffff;
}

/* Blanco con borde gris */
.btn-secondary {
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #223d71;
}

.btn-secondary:hover {
  background-color: #f9fafb;
  color: #223d71;
}

/* Rojo sólido: acciones de parada */
.btn-danger {
  border: none;
  background-color: #dc2626;
  color: #ffffff;
}

.btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* Rojo con borde: acciones destructivas */
.btn-danger-outline {
  border: 1px solid #dc2626;
  background-color: #ffffff;
  color: #dc2626;
}

.btn-danger-outline:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

/* Gris oscuro con borde */
.btn-outline-dark {
  border: 1px solid #1f2937;
  background-color: #ffffff;
  color: #1f2937;
}

.btn-outline-dark:hover {
  background-color: #f9fafb;
  color: #1f2937;
}

/* Modificadores de tamaño y ajuste */
.btn-sm {
  padding: 8px 16px;
}

.btn-xs {
  padding: 8px 12px;
  font-size: 12px;
}

.btn-nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   Componentes propios: selector y zona de arrastre
   --------------------------------------------------------------------------
   Escritos con CSS propio en lugar de utilidades de Tailwind. El purgado de
   Tailwind sólo conserva las clases que encuentra escritas en las plantillas,
   así que los estados que se alternan desde JavaScript (menú abierto, arrastre
   en curso, fichero seleccionado) desaparecían del CSS compilado.
   ========================================================================== */

/* --- Campo con etiqueta --- */
.mv-field {
  margin-bottom: 0.75rem;
}

.mv-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
}

/* --- Selector --- */
.mv-select {
  position: relative;
  width: 100%;
}

.mv-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  text-align: left;
  color: #1f2937;
  background-color: #ffffff;
  border: 2px solid var(--unizar-green);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mv-select__trigger:hover {
  border-color: #38a169;
}

.mv-select__trigger:focus-visible {
  outline: none;
  border-color: #38a169;
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.15);
}

.mv-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-select__chevron {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  color: #6b7280;
  transition: transform 0.2s ease;
}

.mv-select.is-open .mv-select__chevron {
  transform: rotate(180deg);
}

.mv-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  max-height: 15rem;
  overflow-y: auto;
  display: none;
}

.mv-select.is-open .mv-select__menu {
  display: block;
}

.mv-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 8px 10px;
  font-size: 14px;
  color: #374151;
  border-radius: 4px;
  cursor: pointer;
}

.mv-select__option:hover,
.mv-select__option.is-active {
  background-color: #f1f5f9;
}

.mv-select__option[aria-selected='true'] {
  color: #223d71;
  font-weight: 600;
}

.mv-select__check {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--unizar-green);
  visibility: hidden;
}

.mv-select__option[aria-selected='true'] .mv-select__check {
  visibility: visible;
}

/* --- Interruptor --- */
.mv-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
}

.mv-switch:hover {
  border-color: #cbd5e1;
}

.mv-switch__label {
  font-size: 0.875rem;
  color: #374151;
}

.mv-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mv-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.25rem;
  background-color: #cbd5e1;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

.mv-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.mv-switch__input:checked + .mv-switch__track {
  background-color: #16a34a;
}

.mv-switch__input:checked + .mv-switch__track::after {
  transform: translateX(1.25rem);
}

.mv-switch__input:focus-visible + .mv-switch__track {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
}

/* --- Zona de arrastre --- */
.mv-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 2rem 1rem;
  text-align: center;
  background-color: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mv-dropzone:hover,
.mv-dropzone:focus-visible {
  outline: none;
  border-color: #223d71;
  background-color: #f8fafc;
}

.mv-dropzone.is-dragover {
  border-color: #223d71;
  border-style: solid;
  background-color: #eef2ff;
}

/* El input nativo se oculta por completo: el clic se delega desde la zona.
   Superpuesto y transparente, reaparecía si el CSS no cargaba del todo. */
.mv-dropzone__input {
  display: none;
}

.mv-dropzone__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  /* En bloque y con margen automático: como SVG en línea quedaba descentrado
     respecto al texto por el espacio entre líneas. */
  margin: 0 auto 0.5rem;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.mv-dropzone.is-dragover .mv-dropzone__icon {
  color: #223d71;
}

.mv-dropzone__title {
  font-size: 1rem;
  font-weight: 500;
  color: #374151;
}

.mv-dropzone__hint {
  font-size: 0.875rem;
  color: #6b7280;
}

.mv-dropzone.has-file .mv-dropzone__prompt,
.mv-dropzone:not(.has-file) .mv-dropzone__file {
  display: none;
}

.mv-dropzone__file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 28rem;
  padding: 0.75rem 1rem;
  text-align: left;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.mv-dropzone__file-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: #223d71;
}

.mv-dropzone__file-info {
  flex: 1;
  min-width: 0;
}

.mv-dropzone__file-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-dropzone__file-size {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
}

.mv-dropzone__file-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: #94a3b8;
  background: none;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mv-dropzone__file-remove:hover {
  color: #dc2626;
  background-color: #fee2e2;
}

/* Variante compacta del selector, para barras de herramientas */
.mv-select--compact .mv-select__trigger {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-width: 1px;
  border-color: #d1d5db;
}

.mv-select--compact .mv-select__trigger:hover {
  border-color: #9ca3af;
}

.mv-select--compact .mv-select__trigger:focus-visible {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.mv-select--compact .mv-select__option {
  font-size: 0.75rem;
  padding: 6px 8px;
}