/* styles.css - Estilos base responsive inspirados en aislg.es (tonos azules limpios) */
:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #0d6efd; /* azul acento */
  --primary-700: #0a58ca;
  --primary-50: #e7f0ff;
  --border: #e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* Header (pequeño ajuste visual, Bootstrap gestiona la navbar) */
.site-header {
  background: linear-gradient(180deg, var(--surface), #f9fbff);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
/* La navbar ya es responsive con Bootstrap */

/* Layout */
/* Usamos .container de Bootstrap */
.card { background: var(--surface); box-shadow: var(--shadow); border-radius: 12px; padding: 24px; }
.grid { display: grid; gap: 16px; }
.grid.columns-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 768px) {
  .grid.columns-2 { grid-template-columns: 1fr; }
}

h1, h2, h3 { margin: 0 0 12px; }
.muted { color: var(--muted); }

/* Formularios: dejamos que Bootstrap aplique .form-control.
   Mantenemos .field para estructura básica y espaciado */
form .field { display: grid; gap: 6px; margin-bottom: 0.75rem; }
label { font-size: 0.9rem; color: #374151; }

/* Alertas: dejamos Bootstrap y mapeamos clases personalizadas via JS */

/* Utilidades */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.center { text-align: center; }
.hidden { display: none; }

/* Footer mínimo (si se añade) */
.site-footer { color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border); }
.site-footer .container { padding-top: 12px; padding-bottom: 12px; }

/* --- Mejoras de responsividad en tablas y listas --- */
/* Asegurar scroll horizontal suave en tablas responsivas (iOS/android) */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Evitar desbordes por palabras/líneas largas en celdas */
.table td, .table th { word-break: normal; overflow-wrap: break-word; hyphens: auto; }

/* En pantallas pequeñas, forzar layout más estable de tablas */
@media (max-width: 576px) {
  /* Mantener columnas de acciones sin salto, centradas y estrechas */
  .table .text-nowrap { white-space: nowrap !important; }
}

/* Suavizar el comportamiento de .text-break dentro de tablas (evitar cortes agresivos) */
.table td.text-break, .table th.text-break { word-break: normal !important; overflow-wrap: break-word; hyphens: auto; }

/* Utilidad para truncar con puntos suspensivos cuando sea apropiado */
.cell-truncate { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tamaño de texto extra-pequeño para anotaciones o auditorías */
.text-xs { font-size: 0.75rem !important; line-height: 1.2; }

/* --- Tarjetas de secciones en formularios (suaves y con sombra) --- */
.section-card { border: 1px solid var(--border); border-left-width: 6px; border-radius: 12px; padding: 16px; background: #fbfcff; box-shadow: 0 8px 24px rgba(0,0,0,.06); background-clip: padding-box; }
.section-card h2 { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: #334155; }
.section-personal { border-left-color: #b6d4fe; background: #eef5ff; }
.section-direccion { border-left-color: #a3d9b5; background: #eefaf3; }
.section-contacto { border-left-color: #f1aeb5; background: #fff1f4; }
.section-cuota { border-left-color: #ffe69c; background: #fff8e1; }

/* --- Tarjetas enlazables (inicio): hover y click --- */
.link-card {
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  border: 1px solid var(--border);
}
.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  background-color: var(--primary-50);
}
.link-card:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  background-color: #dde9ff;
}
.link-card:focus-within {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}
.link-card { cursor: pointer; }