/* ============================================================
   Migra Asesorías Portal — global.css
   Reset + variables corporativas + componentes base
   ============================================================ */

/* ─── Variables ──────────────────────────────────────────── */
:root {
  --color-primario   : #1A3A6B;
  --color-acento     : #0BCEA7;
  --color-fondo      : #F5F7FA;
  --color-superficie : #FFFFFF;
  --color-texto      : #1C2340;
  --color-texto-2    : #6B7280;
  --color-peligro    : #EF4444;
  --color-alerta     : #F59E0B;
  --color-exito      : #10B981;

  --radio            : 8px;
  --radio-lg         : 12px;
  --radio-xl         : 16px;
  --sombra           : 0 2px 12px rgba(28,35,64,.08);
  --sombra-md        : 0 4px 24px rgba(28,35,64,.12);
  --transicion       : 0.18s ease;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'DM Sans', sans-serif;
  background  : var(--color-fondo);
  color       : var(--color-texto);
  line-height : 1.6;
  min-height  : 100vh;
}

img, svg { display: block; max-width: 100%; }
a        { color: var(--color-acento); text-decoration: none; }
a:hover  { text-decoration: underline; }

ul, ol   { list-style: none; }

/* ─── Botones ────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-danger {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  height         : 44px;
  padding        : 0 20px;
  border         : none;
  border-radius  : var(--radio);
  font-family    : 'DM Sans', sans-serif;
  font-size      : 15px;
  font-weight    : 600;
  cursor         : pointer;
  transition     : background var(--transicion), opacity var(--transicion),
                   box-shadow var(--transicion);
  white-space    : nowrap;
  user-select    : none;
}

.btn-primary {
  background: var(--color-primario);
  color     : #fff;
}
.btn-primary:hover:not(:disabled) {
  background : #22498a;
  box-shadow : 0 4px 12px rgba(26,58,107,.3);
}

.btn-secondary {
  background: var(--color-superficie);
  color     : var(--color-primario);
  border    : 1.5px solid #E5E7EB;
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-primario);
  background  : var(--color-fondo);
}

.btn-danger {
  background: var(--color-peligro);
  color     : #fff;
}
.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity : 0.6;
  cursor  : not-allowed;
}

/* Estado cargando */
.btn-loading {
  position: relative;
  color   : transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content      : '';
  position     : absolute;
  width        : 18px;
  height       : 18px;
  border       : 2px solid rgba(255,255,255,.4);
  border-top   : 2px solid #fff;
  border-radius: 50%;
  animation    : spin .7s linear infinite;
}
.btn-secondary.btn-loading::after {
  border-color    : rgba(26,58,107,.3);
  border-top-color: var(--color-primario);
}

/* ─── Input group ────────────────────────────────────────── */
.input-group {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  margin-bottom : 16px;
}

.input-group label {
  font-size  : 14px;
  font-weight: 600;
  color      : var(--color-texto);
}

.input-group input,
.input-group select,
.input-group textarea {
  height       : 44px;
  padding      : 0 14px;
  font-family  : 'DM Sans', sans-serif;
  font-size    : 16px;       /* mínimo 16px — previene zoom iOS */
  color        : var(--color-texto);
  background   : var(--color-superficie);
  border       : 1.5px solid #E5E7EB;
  border-radius: var(--radio);
  outline      : none;
  transition   : border-color var(--transicion), box-shadow var(--transicion);
  width        : 100%;
}

.input-group textarea {
  height    : auto;
  min-height: 88px;
  padding   : 10px 14px;
  resize    : vertical;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-color: var(--color-acento);
  box-shadow  : 0 0 0 3px rgba(11,206,167,.15);
}

.input-group input.error,
.input-group select.error {
  border-color: var(--color-peligro);
}

.input-group .field-error {
  font-size : 13px;
  color     : var(--color-peligro);
  min-height: 18px;
}

/* ─── Card ───────────────────────────────────────────────── */
.card {
  background   : var(--color-superficie);
  border-radius: var(--radio-lg);
  box-shadow   : var(--sombra);
  padding      : 24px;
}

/* ─── Badge ──────────────────────────────────────────────── */
.badge {
  display      : inline-block;
  padding      : 3px 10px;
  border-radius: 100px;
  font-size    : 12px;
  font-weight  : 600;
  white-space  : nowrap;
}

.badge-pendiente,
.badge-pendiente_pago,
.badge-pendiente_docs,
.badge-pendiente_pago_final { background: #FEF3C7; color: #92400E; }

.badge-aprobado,
.badge-docs_aprobadas,
.badge-resuelto,
.badge-confirmado { background: #D1FAE5; color: #065F46; }

.badge-rechazado,
.badge-denegado,
.badge-cerrado,
.badge-devuelto   { background: #FEE2E2; color: #991B1B; }

.badge-en_revision,
.badge-en_tramitacion,
.badge-presentado,
.badge-en_seguimiento { background: #DBEAFE; color: #1E40AF; }

/* ─── Toast ──────────────────────────────────────────────── */
.toast-container {
  position      : fixed;
  bottom        : 24px;
  right         : 24px;
  z-index       : 9999;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  pointer-events: none;
}

.toast {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  min-width    : 280px;
  max-width    : 380px;
  padding      : 14px 18px;
  border-radius: var(--radio);
  box-shadow   : var(--sombra-md);
  font-size    : 14px;
  font-weight  : 500;
  pointer-events: auto;
  animation    : toastIn .25s ease forwards;
}

.toast.hide { animation: toastOut .25s ease forwards; }

.toast-success { background: #ECFDF5; color: #065F46; border-left: 4px solid var(--color-exito); }
.toast-error   { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--color-peligro); }
.toast-info    { background: #EFF6FF; color: #1E40AF; border-left: 4px solid var(--color-primario); }
.toast-warning { background: #FFFBEB; color: #92400E; border-left: 4px solid var(--color-alerta); }

@keyframes toastIn  { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(32px); } }

/* ─── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position  : fixed;
  inset     : 0;
  background: rgba(28,35,64,.45);
  backdrop-filter: blur(3px);
  z-index   : 1000;
  display   : flex;
  align-items: center;
  justify-content: center;
  padding   : 0;           /* mobile: full-screen via .modal */
  animation : fadeIn .2s ease;
}

.modal {
  background   : var(--color-superficie);
  border-radius: var(--radio-xl);
  box-shadow   : var(--sombra-md);
  width        : 100%;
  max-height   : 100dvh;
  overflow-y   : auto;
  display      : flex;
  flex-direction: column;
  animation    : slideUp .25s ease;
}

.modal-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 20px 24px 16px;
  border-bottom  : 1px solid #F3F4F6;
  position       : sticky;
  top            : 0;
  background     : var(--color-superficie);
  z-index        : 1;
}

.modal-header h2 { font-size: 18px; font-weight: 700; }

.modal-close {
  background   : none;
  border       : none;
  cursor       : pointer;
  padding      : 4px;
  color        : var(--color-texto-2);
  border-radius: 6px;
  transition   : color var(--transicion), background var(--transicion);
  display      : flex;
  align-items  : center;
}
.modal-close:hover { color: var(--color-texto); background: var(--color-fondo); }

.modal-body    { padding: 20px 24px; flex: 1; }
.modal-footer  {
  padding    : 16px 24px 20px;
  border-top : 1px solid #F3F4F6;
  display    : flex;
  gap        : 10px;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .modal { max-width: 560px; border-radius: var(--radio-xl); }
  .modal-overlay { padding: 24px; }
}

/* ─── Spinner standalone ─────────────────────────────────── */
.spinner {
  display      : inline-block;
  width        : var(--spinner-size, 24px);
  height       : var(--spinner-size, 24px);
  border       : 2px solid rgba(26,58,107,.15);
  border-top   : 2px solid var(--color-primario);
  border-radius: 50%;
  animation    : spin .7s linear infinite;
}
.spinner-sm { --spinner-size: 16px; }
.spinner-lg { --spinner-size: 40px; }

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Tabla responsive ───────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 14px;
}
th {
  text-align   : left;
  padding      : 10px 14px;
  background   : var(--color-fondo);
  color        : var(--color-texto-2);
  font-weight  : 600;
  font-size    : 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid #E5E7EB;
  white-space  : nowrap;
}
td {
  padding      : 12px 14px;
  border-bottom: 1px solid #F3F4F6;
  color        : var(--color-texto);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td      { background: #F9FAFB; }

/* ─── Utilidades ─────────────────────────────────────────── */
.text-muted   { color: var(--color-texto-2); }
.text-danger  { color: var(--color-peligro); }
.text-success { color: var(--color-exito); }
.text-acento  { color: var(--color-acento); }
.text-sm      { font-size: 13px; }
.text-xs      { font-size: 12px; }
.font-bold    { font-weight: 700; }
.font-medium  { font-weight: 500; }
.mt-8  { margin-top:  8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom:  8px; }
.mb-16 { margin-bottom: 16px; }
.d-flex        { display: flex; }
.align-center  { align-items: center; }
.gap-8         { gap:  8px; }
.gap-16        { gap: 16px; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.w-full        { width: 100%; }
.hidden        { display: none !important; }