/* =====================================================================
   app.css — Design system "Vuelta al Cole" (ATE Santa Fe)
   ---------------------------------------------------------------------
   Capa moderna sobre Bootstrap 3. Mobile-first. Reestiliza los
   componentes existentes SIN cambiar el HTML/grid de las páginas.
   Se carga DESPUÉS de bootstrap.min.css y style.css para poder
   sobrescribir sus estilos.
   ===================================================================== */

/* ------------------------- 1. DESIGN TOKENS ------------------------- */
:root {
  /* Paleta institucional (verdes ATE + acentos de la campaña) */
  --verde-oscuro:   #2f7d32;
  --verde:          #346643;
  --verde-medio:    #4c9a4f;
  --lima:           #a8cf45;
  --lima-oscuro:    #8bb734;
  --teal-suave:     #b5dcca;

  /* Acentos alegres (de la gráfica de campaña) */
  --rojo:           #e0362e;
  --amarillo:       #f6c72b;
  --rosa:           #e83e8c;
  --celeste:        #2da2c8;

  /* Neutros */
  --tinta:          #1f2a24;
  --gris:           #5b6b60;
  --gris-claro:     #8a978e;
  --linea:          #d9e2db;
  --panel:          #ffffff;
  --fondo:          #eef4ec;
  --fondo-2:        #e3efdf;

  /* Estados */
  --exito:          #2e7d32;
  --exito-bg:       #e6f4ea;
  --error:          #c62828;
  --error-bg:       #fdecea;
  --aviso:          #b26a00;
  --aviso-bg:       #fff4e0;
  --info-bg:        #e7f1fb;

  /* Tipografía */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --fs-base: 16px;

  /* Espaciado */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Radios y sombras */
  --r-sm: 8px;  --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --sombra-sm: 0 1px 3px rgba(31,42,36,.10);
  --sombra-md: 0 6px 20px rgba(31,42,36,.12);
  --sombra-lg: 0 14px 40px rgba(31,42,36,.16);

  /* Control táctil mínimo */
  --touch: 48px;
}

/* ------------------------- 2. BASE ------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font) !important;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--tinta);
  /* Reemplaza el fondo tipo pizarrón por un fondo claro y limpio */
  background: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%) !important;
  background-attachment: fixed !important;
  min-height: 100%;
  margin: 0 0 72px 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--verde); }

a { color: var(--verde-oscuro); }
a:hover, a:focus { color: var(--verde); text-decoration: none; }

/* Contenedor: aire cómodo en móvil */
.container { padding-left: 16px; padding-right: 16px; }

/* La vieja style.css metía margin lateral a .row; lo normalizamos */
.row { margin-left: -10px; margin-right: -10px; margin-bottom: 0; }

/* ------------------------- 3. HEADER / NAV ------------------------- */
.navbar-default { background: transparent; border: 0; margin-bottom: 0; }
.menu_area { padding: 0; }
.header_img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sombra-sm);
}

/* ------------------------- 4. SECCIONES / TARJETAS ------------------------- */
.team { float: none; margin-bottom: var(--sp-6); }
.team_area {
  display: block;            /* el style.css viejo lo dejaba en 'inline' y la
                                tarjeta blanca se pintaba fragmentada (cajitas
                                cortadas a la izquierda). Con block se ve una sola. */
  width: 100%;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  padding: clamp(20px, 4vw, 36px);
  margin-top: var(--sp-5);
}

/* Encabezado de sección */
.heading { margin: 0 0 var(--sp-4); padding: 0; text-align: center; }
.heading .heanding_titulo,
.heading span.heanding_titulo {
  display: block;
  color: var(--verde-oscuro);
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  line-height: 1.2;
}
.heading .heanding_descripcion,
.heading span.heanding_descripcion { color: var(--gris); font-size: 15px; }
.heading h2 {
  font-size: clamp(18px, 4.5vw, 26px) !important;
  line-height: 1.25 !important;
  color: var(--verde-oscuro) !important;
  padding: 0 !important;
  margin: 0 0 var(--sp-2) !important;
  font-weight: 800;
}
.heading p { font-size: 15px; line-height: 1.5; font-weight: 400; }

/* ------------------------- 5. FORMULARIOS ------------------------- */
.form-group { margin-bottom: var(--sp-4); }

label,
.control-label {
  color: var(--verde) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 0 var(--sp-1) !important;
  margin-bottom: var(--sp-1);
  text-align: left !important;
  display: block;
}

legend {
  color: var(--verde-oscuro);
  border: 0 !important;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: var(--sp-4);
}

/* Inputs y selects: grandes, legibles, táctiles */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: var(--touch);
  height: auto;
  padding: 10px 14px;
  font-size: 16px !important;  /* 16px evita zoom automático en iOS */
  font-weight: 500;
  color: var(--tinta) !important;
  background: #fff !important;
  border: 1.5px solid var(--linea) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea, textarea.form-control { min-height: 96px; }

.form-control:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--verde-medio) !important;
  box-shadow: 0 0 0 3px rgba(76,154,79,.18) !important;
  outline: none;
}

.form-control::placeholder { color: var(--gris-claro); font-weight: 400; }

/* Flecha propia para <select> (quitamos apariencia nativa) */
select:not([multiple]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23346643' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* Campos de solo lectura (datos del afiliado) */
.span_afiliado_titular {
  display: block;
  height: auto;              /* el style.css viejo fijaba height:34px y el texto
                                largo (ej. Dependencia) se salía del recuadro */
  min-height: var(--touch);
  padding: 10px 14px;
  background: var(--fondo) !important;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  color: var(--verde-oscuro);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.form-control[readonly], .form-control[disabled] {
  background: var(--fondo) !important;
  color: var(--gris) !important;
  border: 1.5px solid var(--linea) !important;
  cursor: not-allowed;
}

.input-group { margin-bottom: var(--sp-3); }

/* ---- Grupos de input (Bootstrap 3): addon + input/select SIN costuras ---- */
/* Por defecto, todo lo de adentro va con esquinas planas... */
.input-group .form-control,
.input-group > .input-group-addon {
  border-radius: 0 !important;
}
/* ...y solo se redondean los EXTREMOS del grupo */
.input-group > .input-group-addon:first-child,
.input-group > .form-control:first-child {
  border-top-left-radius: var(--r-sm) !important;
  border-bottom-left-radius: var(--r-sm) !important;
}
.input-group > .input-group-addon:last-child,
.input-group > .form-control:last-child {
  border-top-right-radius: var(--r-sm) !important;
  border-bottom-right-radius: var(--r-sm) !important;
}
/* Estilo del addon (etiqueta "DOCUMENTO:", "Talle:", ícono, etc.) */
.input-group-addon {
  background: var(--fondo);
  border: 1.5px solid var(--linea);
  color: var(--verde-oscuro);
  font-weight: 700;
  white-space: nowrap;
}
/* Evitar el doble borde en la unión addon/input (que se ve como una costura) */
.input-group .input-group-addon + .form-control,
.input-group .form-control + .input-group-addon,
.input-group .input-group-addon + .input-group-addon {
  border-left: 0 !important;
}

/* ---- Radios/checks en línea (ej. SI / NO de los talles) ---- */
.radio-inline, .checkbox-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding-left: 0 !important;         /* anula el padding-left de BS3 */
  margin: 0 18px 6px 0 !important;
  font-weight: 700;
  color: var(--tinta);
  background: transparent !important;
  cursor: pointer;
  min-height: auto;
}
.radio-inline > input[type="radio"],
.checkbox-inline > input[type="checkbox"] {
  position: static !important;        /* BS3 lo pone absolute; lo devolvemos al flujo */
  margin: 0 !important;
  width: 18px;
  height: 18px;
  min-height: 0;
  vertical-align: middle;
  accent-color: var(--verde);
  cursor: pointer;
}
.radio-inline > input[disabled] { cursor: not-allowed; }

/* ------------------------- 6. BOTONES ------------------------- */
.btn {
  min-height: var(--touch);
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 0;
  box-shadow: var(--sombra-sm);
  transition: transform .08s ease, filter .15s ease, background-color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { transform: translateY(1px); }
.btn:focus { outline: 3px solid rgba(76,154,79,.35); outline-offset: 2px; }

.btn-success,
.submit_btn {
  background: var(--verde) !important;
  color: #fff !important;
  border: 0 !important;
}
.btn-success:hover, .btn-success:focus,
.submit_btn:hover { background: var(--verde-oscuro) !important; color: #fff !important; }

.btn-primary { background: var(--celeste) !important; color: #fff !important; }
.btn-default, .btn-secondary {
  background: #fff !important;
  color: var(--verde) !important;
  border: 1.5px solid var(--linea) !important;
}
.btn-danger { background: var(--rojo) !important; color: #fff !important; }

/* Botón destacado tipo call-to-action (lima) */
.btn_formulario {
  background: var(--lima) !important;
  color: var(--verde-oscuro) !important;
  border-radius: var(--r-pill) !important;
  font-size: clamp(16px, 4vw, 20px) !important;
  font-weight: 800;
  padding: 14px 28px;
  box-shadow: var(--sombra-md);
}
.btn_formulario:hover { background: var(--lima-oscuro) !important; color: #fff !important; }

/* En móvil, los botones de acción ocupan el ancho para ser fáciles de tocar */
@media (max-width: 575px) {
  .team_area .btn,
  form .btn { width: 100%; margin: 6px 0 0; }
}

/* ------------------------- 7. ALERTAS ------------------------- */
.alert {
  border: 0;
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--sombra-sm);
  font-size: 15px;
  margin-bottom: var(--sp-4);
}
.alert-success { background: var(--exito-bg); color: var(--exito); }
.alert-danger  { background: var(--error-bg); color: var(--error); }
.alert-warning { background: var(--aviso-bg); color: var(--aviso); }
.alert-info    { background: var(--info-bg); color: var(--verde-oscuro); }

/* Alerta destacada del index (verde institucional) */
.alerta_index,
.alert-info.alerta_index {
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-oscuro) 100%) !important;
  color: #fff !important;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  padding: clamp(18px, 4vw, 28px);
}
.alerta_index h2 { color: #fff !important; font-size: clamp(16px, 4vw, 22px) !important; line-height: 1.35 !important; }
.alerta_index span { color: #fff !important; }

/* Pizarrón de recordatorios */
.alerta_pizarron {
  background: var(--fondo) !important;
  border-left: 5px solid var(--lima) !important;
  color: var(--verde-oscuro) !important;
  border-radius: var(--r-md);
}
.alerta_pizarron h3 {
  background: transparent !important;
  color: var(--verde-oscuro) !important;
  font-size: 18px;
  font-weight: 800;
  float: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  text-transform: none;
  line-height: 1.3;
}
.alerta_pizarron ul { padding-left: 20px; margin: 0; }
.alerta_pizarron li { margin-bottom: var(--sp-2); }
.alerta_pizarron li span { font-size: 15px !important; }

.mensaje_confirmar_datos {
  background: var(--verde) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md);
}

.success { border: 0; background: var(--exito-bg); color: var(--exito); border-radius: var(--r-sm); padding: 10px 12px; }
.error   { border: 0; background: var(--error-bg); color: var(--error); border-radius: var(--r-sm); padding: 10px 12px; }

/* ------------------------- 8. MODALES ------------------------- */
.modal-content {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}
.modal-header { background: var(--verde); color: #fff; border: 0; padding: 16px 20px; }
.modal-header .modal-title, .modal-title { color: #fff; font-weight: 800; }
.modal-header .close { color: #fff; opacity: .9; text-shadow: none; }
.modal-body { padding: 20px; font-size: 15px; }
.modal-footer { border: 0; padding: 0 20px 20px; }

/* ------------------------- 9. TABLAS (admin) ------------------------- */
.table { background: #fff; border-radius: var(--r-md); overflow: hidden; }
.table > thead > tr > th {
  background: var(--verde);
  color: #fff;
  border: 0;
  font-weight: 700;
  vertical-align: middle;
}
.table > tbody > tr > td { vertical-align: middle; border-color: var(--linea); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--fondo); }

/* En móvil, las tablas anchas hacen scroll horizontal controlado */
.table-responsive { -webkit-overflow-scrolling: touch; border: 0; }
@media (max-width: 767px) {
  .table-responsive { border: 1px solid var(--linea); border-radius: var(--r-md); }
}

/* ------------------------- 10. PANELES (admin) ------------------------- */
.panel {
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
  background: #fff;
}
.panel-heading { background: var(--fondo); border: 0; font-weight: 700; color: var(--verde-oscuro); border-radius: var(--r-md) var(--r-md) 0 0; }
.panel-default > .panel-heading { color: var(--verde-oscuro); }

/* ------------------------- 11. FOOTER ------------------------- */
footer { text-align: center; padding-bottom: var(--sp-5); }
.footer_left > a, footer a[href*="politica"] { color: var(--verde) !important; font-size: 14px; }
.footer_left { padding-top: var(--sp-3); }

/* ------------------------- 12. SCROLL TO TOP ------------------------- */
.scrollToTop {
  width: 46px; height: 46px; line-height: 46px;
  right: 16px; bottom: 76px;
  background: var(--verde);
  color: #fff !important;
  border-radius: 50%;
  box-shadow: var(--sombra-md);
  font-size: 22px;
}
.scrollToTop:hover { background: var(--verde-oscuro); color: #fff; }

/* ------------------------- 13. UTILIDADES ------------------------- */
img.img-responsive, .img-responsive { max-width: 100%; height: auto; }
.center { margin-left: auto; margin-right: auto; display: block; }

/* Evita el scroll horizontal accidental que forzaba la vieja hoja */
body, html { overflow-x: hidden; }

/* Indicador de pasos (para el circuito de inscripción) */
.pasos {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 var(--sp-5);
}
.pasos li {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--gris-claro);
  position: relative;
  padding-top: 32px;
}
/* Línea conectora entre pasos */
.pasos li::after {
  content: "";
  position: absolute;
  top: 12px; left: -50%;
  width: 100%; height: 2px;
  background: var(--linea);
  z-index: 0;
}
.pasos li:first-child::after { display: none; }
.pasos li::before {
  content: attr(data-n);
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 24px; line-height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--linea);
  color: var(--gris-claro);
  font-size: 12px;
  z-index: 1;
}
.pasos li.hecho::after { background: var(--lima); }
.pasos li.activo { color: var(--verde-oscuro); }
.pasos li.activo::before { background: var(--verde); border-color: var(--verde); color: #fff; }
.pasos li.hecho::before { background: var(--lima); border-color: var(--lima); color: var(--verde-oscuro); content: "✓"; }

/* ------------------------- 14. BREAKPOINTS (mobile-first) ------------------------- */
/* Base = móvil. A partir de tablet, más aire. */
@media (min-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .team_area { padding: 36px 40px; }
}
@media (min-width: 992px) {
  .team_area { padding: 40px 48px; }
}

/* ------------------------- 15. ADMIN (DataTables, filtros) ------------------------- */
/* Tablas anchas de gestión: scroll horizontal controlado en pantallas chicas */
.dataTables_wrapper { width: 100%; }
@media (max-width: 991px) {
  .dataTables_wrapper .table,
  .dataTables_scroll,
  .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Controles de DataTables (buscador, largo, paginado) más cómodos al tacto */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  min-height: 40px;
  border: 1.5px solid var(--linea) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--verde) !important;
  border-color: var(--verde) !important;
  color: #fff !important;
  border-radius: var(--r-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-sm);
  padding: 6px 12px;
}

/* En admin, permitir que el contenido use todo el ancho con aire lateral */
.admin-container, .contenido-admin { padding: 16px; }

/* --- Panel de control: grilla de accesos --- */
.panel-admin-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 900px;
  margin: 24px auto 0;
}
.panel-tile {
  flex: 0 0 150px;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 118px;
  padding: 18px 12px;
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
  color: var(--verde);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
/* icono y etiqueta en bloque: se apilan aunque el <button> cambie de display */
.panel-tile i { display: block; font-size: 30px; color: var(--verde-medio); line-height: 1; }
.panel-tile span { display: block; }
.panel-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
  border-color: var(--verde-medio);
  background: var(--fondo);
}
.panel-tile:focus { outline: 3px solid rgba(76,154,79,.35); outline-offset: 2px; }
.panel-tile:active { transform: translateY(0); }
/* "Salir" en rojo suave para diferenciarlo */
.panel-tile-salir { color: var(--rojo); }
.panel-tile-salir i { color: var(--rojo); }
.panel-tile-salir:hover { border-color: var(--rojo); background: var(--error-bg); }

/* Título del panel */
section h3 > center, .panel-titulo {
  color: var(--verde-oscuro);
  font-weight: 800;
}

@media (max-width: 480px) {
  .panel-admin-grid { gap: 12px; }
  .panel-tile { flex-basis: 140px; width: 140px; min-height: 100px; font-size: 13px; }
  .panel-tile i { font-size: 26px; }
}

/* Filtros apilables en móvil (formularios de búsqueda del admin) */
@media (max-width: 767px) {
  form .form-inline .form-group { display: block; width: 100%; margin-bottom: 10px; }
  form .form-inline .form-control { width: 100%; }
}