/* ==========================================================================
   ViveLaCity – Taxi Reservas Dashboard
   Archivo: public/css/taxi-reservas.css
   Versión: Atlas 2025-09-18
   ========================================================================== */
/* ----------------------------- Variables base ----------------------------- */
:root {
  --dash-bg:            #f6f7fb;
  --dash-card:          #ffffff;
  --dash-border:        #e5e7eb;
  --dash-text:          #0f172a;   /* slate-900 */
  --dash-text-muted:    #64748b;   /* slate-500 */
  --dash-shadow:        0 8px 24px rgba(15, 23, 42, 0.06);

  --accent-1:           #3b82f6;   /* azul */
  --accent-2:           #22c55e;   /* verde */
  --accent-3:           #f59e0b;   /* ámbar */
  --accent-4:           #ef4444;   /* rojo */
  --accent-5:           #8b5cf6;   /* violeta */

  --pill-green-bg:      #10b981;
  --pill-yellow-bg:     #f59e0b;
  --pill-red-bg:        #ef4444;

  --btn-primary-bg:     #111827;
  --btn-secondary-bg:   #eef2ff;
}

/* --------------------------- Contenedores base ---------------------------- */
#taxi-reservas-container {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-variant-numeric: tabular-nums;
  color: var(--dash-text);
}

#dashboard-content-area {
  /* Evita desborde si la tabla llega a ser más ancha */
  overflow-x: auto;
  /* Tipografía -1 paso (~15px si root=16px) para mejorar densidad */
  font-size: 0.875rem;
  line-height: 1.3;
}

.reservas-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reservas-logo {
  height: 50px;           /* ajusta si lo quieres más grande/pequeño */
  width: auto;
}
.reservas-title {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
}

/* Header del login (/taxi_reservas) */
#reservas-auth-container .reservas-header-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}
#reservas-auth-container .reservas-logo{
  height:56px;   /* ajusta 48–64px si lo prefieres */
  width:auto;
  display:block;
  margin:0 auto;
}
#reservas-auth-container .reservas-title{
  margin:0;
  text-align:center;
  font-weight:800;
  line-height:1.1;
}

#reservas-content-container .reservas-header-left{ display:flex; align-items:center; gap:12px; }
#reservas-content-container .reservas-logo{ height:50px; width:auto; }

/* ====================== Tabla administrativa (reservas) =================== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;                 /* Permite que ID/Acciones ajusten a su contenido */
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  overflow: hidden;
}

.admin-table thead th {
  background: #fbfbfe;
  color: #1f2937;
  font-weight: 600;
  text-align: center;                 /* Títulos centrados (solicitud #4) */
  border-bottom: 1px solid var(--dash-border);
  padding: 5px 6px;                   /* Mitad del padding (solicitud #5) */
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  padding: 5px 6px;                   /* Mitad del padding (solicitud #5) */
  vertical-align: top;
  border-bottom: 1px solid var(--dash-border);
}

/* Rayado sutil */
.admin-table tbody tr:nth-child(odd)  { background: #ffffff; }
.admin-table tbody tr:nth-child(even) { background: #fcfcff; }

/* Utilidades de celdas */
.admin-table .wrap {
  white-space: normal;                /* Permite salto de línea */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.admin-table .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fecha en 2 líneas (optimiza legibilidad) */
.admin-table .date-cell {
  line-height: 1.15;
  white-space: normal;
}

/* Columnas específicas */
.admin-table .col-id {
  width: auto;                        /* Solo lo que ocupa su texto (solicitud #1) */
  white-space: nowrap;
}

.admin-table .col-actions {
  width: auto;                        /* Solo el ancho del/los botón(es) (solicitud #3) */
  white-space: nowrap;
  text-align: center;
}

/* Fila de acciones con botones alineados */
.btn-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =============================== Botones UI =============================== */
.btn-dash {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--dash-border);
  background: #fff;
  color: #111827;
  font-weight: 600;
  cursor: pointer;
  transition: transform .04s ease, box-shadow .12s ease, background .12s ease;
}

.btn-dash:hover { box-shadow: 0 6px 16px rgba(15,23,42,.08); transform: translateY(-1px); }

.btn-dash-primary {
  background: var(--btn-primary-bg);
  color: #fff;
  border-color: #0b1220;
}
.btn-dash-primary:hover { background: #0b1220; }

.btn-dash-secondary {
  background: var(--btn-secondary-bg);
  color: #111827;
}

/* ============================== Pills (estados) =========================== */
.pill-confirmed,
.pill-pending,
.pill-rejected {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.80em;                  /* Más compacta */
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

.pill-confirmed { background: var(--pill-green-bg); }
.pill-pending   { background: var(--pill-yellow-bg); color: #1f2937; }
.pill-rejected  { background: var(--pill-red-bg); }

/* ============================ Panel de KPIs (Pro) ========================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 6px 0 10px;
}

.kpi-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--dash-shadow);
}

.kpi-title {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--dash-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dash-text);
}

.kpi-caption {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--dash-text-muted);
}

/* Acentos sutiles por tarjeta */
.kpi-card--accent-1 { border-left: 4px solid var(--accent-1); }
.kpi-card--accent-2 { border-left: 4px solid var(--accent-2); }
.kpi-card--accent-3 { border-left: 4px solid var(--accent-3); }
.kpi-card--accent-4 { border-left: 4px solid var(--accent-4); }
.kpi-card--accent-5 { border-left: 4px solid var(--accent-5); }

.kpi-empty {
  background: #fff;
  border: 1px dashed var(--dash-border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: var(--dash-text-muted);
}

/* =============================== Modal detalles =========================== */
#booking-details-modal {
   position: fixed;
   inset: 0;
   display: none;          /* se muestra en JS */
   align-items: center;
   justify-content: center;
   padding: 12px;          /* margen de seguridad para que nunca pegue a los bordes */
   z-index: 50;
   left: 50% !important;
   transform: translateX(-50%) !important;
}

#modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;                      /* se muestra en JS */
  background: rgba(2, 6, 23, .45);
  backdrop-filter: blur(1.5px);
  z-index: 40;
}

.modal-panel {
   width: min(920px, 92vw);
   max-height: 86vh;
   background: var(--dash-card);
   border: 1px solid var(--dash-border);
   border-radius: 18px;
   box-shadow: var(--dash-shadow);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;     /* evita heredar fixed/absolute previos */
   inset: auto;            /* resetea top/right/bottom/left si existían */
   left: auto; top: auto;  /* defensa extra */
   transform: none;        /* por si existía algún translate heredado */
   margin: 0 auto;         /* por si el flex cae a block en algún caso */
}

/* Header y footer pegajosos, cuerpo con scroll */
.modal-header,
.modal-footer {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dash-border);
  background: #fbfbfe;
}
.modal-footer {
  border-top: 1px solid var(--dash-border);
  border-bottom: none;
}

.modal-body {
  flex: 1 1 auto;
  overflow: auto;                     /* scroll interno para contenidos largos */
  padding: 14px 16px;
}

/* Contenidos en detalle */
.detail-section { margin-bottom: 12px; }
.detail-section h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: var(--dash-text);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 12px;
}
.detail-label {
  display: block;
  font-size: 0.78rem;
  color: var(--dash-text-muted);
  margin-bottom: 2px;
}
.detail-value {
  font-size: 0.95rem;
  color: var(--dash-text);
}

/* Contenedor con scroll vertical para la tabla */
.table-scroll {
  max-height: 70vh;
  overflow: auto;
}

/* Encabezado “sticky” mientras se hace scroll */
.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Centrar cualquier celda marcada como estado */
.admin-table td.status-cell { text-align: center; }

/* Hover sutil por fila para seguimiento visual */
.admin-table tbody tr:hover { background: #f3f6ff; }

/* Aviso por proximidad sin conductor */
.admin-table tbody tr.row-assign-warning { background: rgba(255, 193, 7, 0.8); }
.admin-table tbody tr.row-assign-danger  { background: rgba(220, 53, 69, 0.5); }

/* Paginación */
.pagination-bar{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-top:10px;
}
.pagination-bar .pag-info{
  font-weight:600; color: var(--dash-text-muted);
}

.pagination-bar .g2c-select { width:auto; min-width:6.5rem; }
.pagination-bar .pag-info   { white-space:nowrap; }

/* =============================== Formularios ============================== */
.g2c-form-group { margin-bottom: 10px; }

.g2c-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--dash-text);
}

.g2c-input,
.g2c-select {
  width: 100%;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--dash-text);
}

/* ================================ Toasts ================================== */
#toast-container {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
}

.toast {
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: var(--dash-shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: all .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

.toast.success { background: #16a34a; }
.toast.error   { background: #b91c1c; }