/* site.css — project-specific overrides (base styles in olvidata-theme.css) */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(43, 157, 228, .3);
}

/* Smooth page transitions */
main {
  animation: fadeIn 250ms ease-out;
}

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

/* =========================================================================
   Sistema de formularios (alta / edicion / detalle)
   Ver 25-frontend-design-system.instructions.md, seccion "Formularios".
   El objetivo es que TODA pantalla de alta/edicion/detalle del sistema se
   vea igual: mismo encabezado, mismo ancho de lectura, mismas acciones.
   ========================================================================= */

/* Ancho de lectura. Un formulario estirado a 2500px en un monitor ancho deja
   los labels a la izquierda y los inputs perdidos a la derecha: ilegible.
   Los formularios con grillas internas (Venta) usan --wide. */
.ov-form-page      { max-width: 1080px; }
.ov-form-page--wide { max-width: 1500px; }

/* Encabezado de pantalla: titulo + descripcion + acciones secundarias.
   Reemplaza al <h3> suelto que tenian las pantallas viejas. */
.ov-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.ov-page-head__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ov-gray-900);
}

.ov-page-head__desc {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--ov-text-muted);
  max-width: 70ch;
}

.ov-page-head__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Barra de acciones del formulario. Sticky: en un formulario largo el boton
   Guardar tiene que estar siempre a la vista, sin scrollear hasta el fondo. */
.ov-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.875rem 1rem;
  margin-top: 1.25rem;
  background: var(--ov-surface);
  border: 1px solid var(--ov-border);
  border-radius: 0.5rem;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

/* Empuja lo que venga despues hacia la derecha (ej. un boton de borrar). */
.ov-form-actions__spacer { margin-left: auto; }

/* Marca de campo obligatorio. Se pone en el <label>. */
.ov-required::after {
  content: " *";
  color: var(--ov-danger);
  font-weight: 600;
}

/* Ayuda debajo de un campo: por que existe o que formato espera. */
.ov-field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ov-text-muted);
}

/* Pares etiqueta/valor de las pantallas de Detalle (solo lectura). Evita que
   cada Details invente su propia tabla o su propio <dl>. */
.ov-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}

.ov-detail-item__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ov-text-muted);
  margin-bottom: 0.125rem;
}

.ov-detail-item__value {
  font-size: 0.9375rem;
  color: var(--ov-gray-900);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Valor vacio: que se note que no hay dato, en vez de una celda en blanco. */
.ov-detail-item__value--empty {
  color: var(--ov-gray-400);
  font-weight: 400;
  font-style: italic;
}

@media (max-width: 575.98px) {
  .ov-page-head { flex-direction: column; align-items: stretch; }
  .ov-form-actions { padding: 0.75rem; }
  .ov-form-actions .btn { flex: 1 1 auto; }
}