/* =============================================================================
   custom.css — estilos mínimos de la plataforma CLD
   Mantener pequeño. Solo lo que no se puede resolver con clases bslib/Bootstrap.
   ============================================================================= */

/* ── G — Pasada táctil global ─────────────────────────────────────────────
   Tamaños cómodos para tablet. No reinventamos Bootstrap, solo afinamos
   donde queda apretado en un dedo. Aplicado a inputs, paginación DT,
   modales y nav-tabs.

   Filosofía: ≥ 44 px en cualquier elemento con tap real, fuente base 1rem.
*/
html, body { font-size: 1rem; }

/* Inputs de formulario en tablet: padding generoso, altura mínima cómoda.
   Aplica a textInput, dateInput, numericInput, selectInput, textAreaInput. */
.form-control,
.form-select,
.shiny-input-container input[type="text"],
.shiny-input-container input[type="number"],
.shiny-input-container input[type="date"],
.shiny-input-container input[type="email"],
.shiny-input-container input[type="password"],
.shiny-input-container textarea {
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
}
.form-control:focus,
.form-select:focus { box-shadow: 0 0 0 0.2rem rgba(44,62,80,0.15); }

/* selectizeInput: el wrapper también necesita altura cómoda */
.selectize-input {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 1rem;
}
.selectize-input.has-items { padding: 6px 10px 4px; }

/* Espaciado entre filas de campos en formularios verticales */
.shiny-input-container { margin-bottom: 0.85rem; }
.form-label, .control-label {
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

/* Modales cómodos en tablet */
.modal-dialog { margin: 1rem auto; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.modal-footer .btn { margin-left: 0; }

/* Pestañas (navset_card_tab): área tap más cómoda */
.nav-tabs .nav-link {
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  min-height: 44px;
}

/* Paginación DT: botones más grandes */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.45rem 0.75rem !important;
  min-width: 38px;
  text-align: center;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  min-height: 38px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
}

/* Filas de tabla: más altura para dedos. La tabla DT se ve mejor en tablet
   con padding superior/inferior generoso, sin perder densidad lateral. */
table.dataTable td, table.dataTable th {
  padding: 10px 8px;
}
table.dataTable.compact td, table.dataTable.compact th {
  padding: 8px 6px;
}

/* Botones del modal con texto-icono: respiración */
.modal-footer .btn { white-space: nowrap; }

/* notificaciones Shiny (toast esquina inferior derecha) más legibles en tablet */
.shiny-notification {
  font-size: 0.95rem;
  padding: 12px 16px;
}

/* ── Login ────────────────────────────────────────────────────────────────── */
.cld-login-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 6rem;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}
.cld-login-card {
  width: 380px;
  background: #fff;
  padding: 2rem 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.cld-login-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #2C3E50;
}
.cld-login-subtitle {
  margin: 0 0 1.25rem;
  color: #6c757d;
  font-size: 0.92rem;
}

/* shinyauthr inserta su propio panel; quitamos el borde y el título por defecto */
.cld-login-card #login-auth-panel {
  border: none;
  padding: 0;
  box-shadow: none;
}

/* ── Tabla de candidatas ──────────────────────────────────────────────────── */
table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
  white-space: nowrap;
}

table.dataTable .badge {
  font-size: 0.78rem;
  padding: 0.35em 0.6em;
}

/* ── Navbar densidad ──────────────────────────────────────────────────────── */
.navbar .nav-link {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* ── Agenda (rejilla CSS Grid) ──────────────────────────────────────────────
   Tablet-first: filas de 34 px (cabecera 40 px). Ver mod_agenda.R::build_agenda_grid.
   Hover solo en dispositivos con puntero fino (`@media (hover: hover)`); en táctil
   usamos `:active` para evitar el efecto sticky-hover tras un tap.
*/
.agenda-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.agenda-grid {
  display: grid;
  gap: 1px;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.9rem;
  user-select: none;
  min-width: 720px;       /* asegura legibilidad cuando el contenedor es estrecho */
}
.agenda-corner,
.agenda-day-header {
  background: #2C3E50;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 8px 4px;
  text-transform: capitalize;
  font-size: 0.92rem;
}
.agenda-hour {
  background: #f8f9fa;
  text-align: right;
  padding: 0 8px 0 0;
  color: #495057;
  font-size: 0.78rem;
  line-height: 34px;       /* iguala a la altura de fila para vertical centering */
}
.agenda-hour-half { color: transparent; }

.agenda-cell {
  background: #fff;
  cursor: pointer;
  transition: background 0.08s;
  /* aumentar área de tap: las celdas de slot ya cubren 96×34 px, pero el bloque
     visible se completa con la celda contigua de la otra mitad de hora */
}
@media (hover: hover) and (pointer: fine) {
  .agenda-cell:hover  { background: #e9f5ff; }
  .agenda-event:hover { filter: brightness(1.1); }
}
.agenda-cell:active   { background: #d6ebff; }
.agenda-event:active  { filter: brightness(1.15); }

.agenda-cell-half  { background: #fcfcfc; }

.agenda-event {
  background: #2C3E50;
  color: #fff;
  padding: 6px 8px;        /* +táctil: tap más cómodo */
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  border-radius: 4px;
  margin: 1px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  min-height: 44px;        /* WCAG táctil: ≥ 44 px de alto en cualquier evento */
}
.agenda-event-time { font-weight: 600; opacity: 0.9; font-size: 0.78rem; }
.agenda-event-name { font-weight: 600; }
.agenda-event-place { opacity: 0.85; font-size: 0.75rem; }

.agenda-event.is-realizada       { background: #198754; }
.agenda-event.is-cancelada       { background: #adb5bd; color: #fff; text-decoration: line-through; }
.agenda-event.is-no_presentado   { background: #ffc107; color: #212529; }

/* ── Identificadores de entrevistadora (SDB###) ─────────────────────────────
   Tipo monoespaciada negrita. Hace que el ID destaque sobre el nombre y
   reduce confusiones tipo SDB002↔SDB012. Aplicado en:
   · selectores de entrevistadora (mod_candidatas, mod_agenda, mod_cita_form)
   · banner del usuario en el header del shell
   · etiqueta "asignación actual" en el modal de reasignación
   La regla es agnóstica al fondo: hereda color del contenedor. */
.entrev-id {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* En el banner blanco del header: ligero refuerzo de contraste */
.cld-user-banner .entrev-id { color: #fff; }

/* En selectizeInput: el dropdown muestra opciones con padding cómodo táctil */
.selectize-dropdown .option { padding: 8px 10px; }
.selectize-dropdown .option .entrev-id,
.selectize-input .item .entrev-id {
  margin-right: 0.15rem;
}

/* ── Botones táctiles (B + C + G) ──────────────────────────────────────────
   Tamaño mínimo cómodo para dedo. .btn-touch para acciones primarias en
   modales y bloques. .btn-touch-sm para acciones inline en tablas (un
   pelín más compacto pero todavía dentro del rango táctil cómodo).
*/
.btn-touch {
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  font-size: 1rem;
  font-weight: 500;
}
.btn-touch .fa, .btn-touch .fas, .btn-touch .far { font-size: 0.95rem; }

.btn-touch-sm {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 0.92rem;
  line-height: 1;
}
.btn-touch-sm .fa, .btn-touch-sm .fas { font-size: 1rem; }

/* ── Acciones rápidas inline en tabla de candidatas (C) ────────────────────
   Tres botones (no_contesta, acepta, otro) en una columna estrecha.
   gap-2, sin wrap para mantener visualmente compactos.
*/
.cand-acciones {
  display: inline-flex;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: center;
}
.cand-acciones .btn {
  border-width: 2px;
}
table.dataTable td.cand-acciones-col,
table.dataTable td.dt-center { text-align: center; }

/* ── Vista Hoy ──────────────────────────────────────────────────────────────
   Bloques grandes apilados. Tipografía clara, hora prominente.
*/
.hoy-wrap { max-width: 980px; margin: 0 auto; }

.hoy-header { padding-bottom: 8px; border-bottom: 1px solid #e9ecef; }
.hoy-fecha {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2C3E50;
  text-transform: capitalize;
}
.hoy-saludo { font-size: 0.95rem; }

.hoy-section { margin-bottom: 28px; }
.hoy-section-title {
  margin: 16px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e9ecef;
  font-weight: 600;
  color: #2C3E50;
}

/* Bloques de cita / candidata */
.hoy-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 4px solid #2C3E50;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.hoy-card-cita.is-realizada     { border-left-color: #198754; }
.hoy-card-cita.is-no_presentado { border-left-color: #ffc107; }
.hoy-card-cita.is-cancelada     { opacity: 0.6; }

.hoy-card-cand                  { border-left-color: #0d6efd; }

.hoy-card-info { flex: 1 1 280px; min-width: 0; }
.hoy-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.hoy-time {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2C3E50;
  min-width: 78px;
  text-align: center;
}

.hoy-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-word;
}
.hoy-name .badge { font-size: 0.72rem; vertical-align: middle; }

.hoy-meta {
  font-size: 0.92rem;
  color: #495057;
  line-height: 1.4;
}

.hoy-empty {
  background: #f8f9fa;
  padding: 14px 16px;
  border-radius: 8px;
  color: #6c757d;
  text-align: center;
  border: 1px dashed #ced4da;
}

/* ── Empty states con orientación (E) ──────────────────────────────────────
   Banners arriba de tabla/agenda cuando no hay resultados pero sí hay
   datos en otras semanas o filtros distintos. Aprovechan el .alert nativo
   de Bootstrap pero con un poquito más de aire.
*/
.empty-banner {
  margin-bottom: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
  border-radius: 8px;
}
.empty-banner strong { font-weight: 600; }
.empty-banner .btn { white-space: nowrap; }

/* ── Vista Hoy — Dirección/DT (F) ──────────────────────────────────────────
   Cuatro bloques: progreso (KPIs grandes), incidencias 24h, alertas clínicas
   (solo DT), zonas en riesgo. Tipografía operativa, sin gráficas.
*/

/* KPIs en grid responsive */
.hoy-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.hoy-kpi {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.hoy-kpi-primary { border-left: 4px solid #2C3E50; }
.hoy-kpi-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #2C3E50;
  letter-spacing: -0.01em;
}
.hoy-kpi-num-sub {
  font-size: 1.1rem;
  font-weight: 400;
  color: #6c757d;
}
.hoy-kpi-label {
  font-size: 0.92rem;
  color: #495057;
  margin-top: 6px;
  line-height: 1.3;
}
.hoy-kpi-bar {
  position: relative;
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  margin-top: 12px;
  overflow: hidden;
}
.hoy-kpi-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: #198754;
  transition: width 0.3s;
}
.hoy-kpi-bar-pct {
  position: absolute;
  right: 6px; top: -18px;
  font-size: 0.8rem;
  color: #198754;
  font-weight: 600;
}

/* Incidencias 24h: filas con timestamp + info */
.hoy-incid {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 4px solid #ffc107;
  border-radius: 8px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.hoy-incid-cancelada     { border-left-color: #6c757d; }
.hoy-incid-no_presentado { border-left-color: #ffc107; }
.hoy-incid-when {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  color: #495057;
  min-width: 110px;
  white-space: nowrap;
}
.hoy-incid-info { flex: 1 1 auto; min-width: 0; }
.hoy-incid-name { font-weight: 600; font-size: 1rem; }
.hoy-incid-meta { font-size: 0.9rem; color: #495057; margin-top: 2px; }
.hoy-incid-motivo { font-size: 0.9rem; color: #6c757d; margin-top: 4px; }

/* Alertas clínicas (DT) */
.hoy-alerta {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  background: #fff5f5;
  border: 1px solid #f5c2c7;
  border-left: 4px solid #b02a37;
  border-radius: 8px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.hoy-alerta-icon {
  color: #b02a37;
  font-size: 1.4rem;
  margin-top: 2px;
}
.hoy-alerta-info { flex: 1 1 auto; }
.hoy-alerta-name { font-weight: 600; font-size: 1rem; }
.hoy-alerta-meta { font-size: 0.9rem; color: #495057; margin-top: 2px; }

/* Zonas en riesgo: filas compactas con tags explicativos */
.hoy-riesgo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 4px solid #fd7e14;
  border-radius: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.hoy-riesgo-name {
  font-weight: 600;
  font-size: 1rem;
  flex: 0 0 auto;
}
.hoy-riesgo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hoy-riesgo-tag {
  background: #fff3cd;
  border: 1px solid #ffe69c;
  color: #664d03;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: nowrap;
}