/* =========================================================
   0) DESIGN SYSTEM (fuente, tamaños, radios, colores base)
   ========================================================= */
:root{
  --app-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --app-font-size: 14px;              /* más compacto/pro */
  --app-line-height: 1.35;

  --radius-0: 0px;                    /* estilo recto */
  --radius-1: 4px;                    /* micro-redondeo si lo quieres */
  --shadow-1: 0 8px 24px rgba(0,0,0,.10);

  --border-soft: rgba(0,0,0,.14);
  --bg-soft: #f5f5f7;

  /* Colores botones “marca” (sobrios) */
  --btn-green: #198754;
  --btn-green-h: #157347;

  --btn-blue: #0d6efd;
  --btn-blue-h: #0b5ed7;

  --btn-gray: #6c757d;
  --btn-gray-h: #5c636a;
}

/* =========================================================
   1) BASE / TIPOGRAFÍA
   ========================================================= */
html, body{
  font-family: var(--app-font);
  font-size: var(--app-font-size);
  line-height: var(--app-line-height);
}

body { padding-top: 70px; } /* deja espacio para la barra fija */
#seccion-app { margin-top: 10px; }
#seccion-login img { margin: 12px 6px; }
.fondogris { background: #fcfaf6; }

/* Ajuste general de títulos Bootstrap para que no se vean gigantes */
h1, .h1 { font-size: 1.45rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.10rem; }


/* =========================================================
   2) BOTONES: estilo unificado en TODA LA APP
   - Rectangulares
   - Mismo alto/padding
   - Hover consistente
   ========================================================= */

/* Base para TODOS los botones Bootstrap */
.btn{
  border-radius: var(--radius-0) !important;
  box-shadow: none !important;
  font-weight: 600;
  padding: .42rem .75rem;
  line-height: 1.1;
  border-width: 1px;
}

.btn:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* Tamaño compacto opcional (para toolbars) */
.btn.btn-compact{
  padding: .32rem .55rem;
  font-size: .90rem;
}

/* Botones de acción “tipo app” (si quieres usarlos en vez de btn-success, etc.) */
.btn-app-green{
  background: var(--btn-green) !important;
  border-color: var(--btn-green-h) !important;
  color: #fff !important;
}
.btn-app-green:hover{ background: var(--btn-green-h) !important; color:#fff !important; }

.btn-app-blue{
  background: var(--btn-blue) !important;
  border-color: var(--btn-blue-h) !important;
  color: #fff !important;
}
.btn-app-blue:hover{ background: var(--btn-blue-h) !important; color:#fff !important; }

.btn-app-gray{
  background: var(--btn-gray) !important;
  border-color: var(--btn-gray-h) !important;
  color: #fff !important;
}
.btn-app-gray:hover{ background: var(--btn-gray-h) !important; color:#fff !important; }

/* Tu clase existente */
.btn-accion {
  border-radius: var(--radius-0) !important; /* unificar */
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}
.btn-accion:disabled { opacity: 0.5; }


/* =========================================================
   3) BADGES (rectangulares y consistentes)
   ========================================================= */
.badge{
  border-radius: var(--radius-0) !important;
  font-weight: 700;
  padding: .35em .55em;
  letter-spacing: .2px;
}


/* =========================================================
   4) NAVBAR / BARRA USUARIO
   ========================================================= */
#barra-usuario { padding-top: 4px; padding-bottom: 4px; }

#barra-usuario .texto-usuario {
  font-size: 0.90rem;  /* un pelín más legible, pero compacto */
  font-weight: 500;
}

/* Botones de la barra (cuadrados, todos igual, visibles siempre) */
#barra-usuario .btn-nav{
  height: 34px;
  min-width: 34px;
  padding: 0 10px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  font-size: 0.95rem;  /* emoji visible */
  line-height: 1;

  border-radius: var(--radius-0) !important;
  border: 1px solid var(--border-soft);
  box-shadow: none !important;

  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

#barra-usuario .btn-nav:active { transform: translateY(1px); }
#barra-usuario .btn-nav:focus  { outline: none; box-shadow: none !important; }

#barra-usuario .btn-nav img,
#barra-usuario .btn-nav svg {
  width: 18px;
  height: 18px;
}

/* Colores por botón: (siempre se ven) */
#btn-nueva-intervencion{
  background-color: var(--btn-green) !important;
  border-color: var(--btn-green-h) !important;
  color: #fff !important;
}
#btn-nueva-intervencion:hover{
  background-color: var(--btn-green-h) !important;
  color: #fff !important;
}

#btn-ver-calendario-reservas{
  background-color: var(--btn-blue) !important;
  border-color: var(--btn-blue-h) !important;
  color: #fff !important;
}
#btn-ver-calendario-reservas:hover{
  background-color: var(--btn-blue-h) !important;
  color: #fff !important;
}

#btn-configurar{
  background-color: #ffffff !important;
  border-color: #cfd4da !important;
  color: #495057 !important;
}

#btn-configurar:hover{
  background-color: #495057 !important;
  border-color: #495057 !important;
  color: #ffffff !important;
}

/* Salir: mantiene rojo pero igual de “recto y alineado” */
#btnCerrarSesion{
  height: 34px;
  min-width: 70px;
  padding: 0 14px;
  border-radius: var(--radius-0) !important;
}


/* =========================================================
   5) POPUPS / MODALES (estética común)
   ========================================================= */

/* Modales Bootstrap: mismo look */
.modal-content{
  border-radius: var(--radius-0) !important;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-soft);
}

.modal-header{
  background: #f8f9fa;
  border-bottom: 1px solid var(--border-soft);
}

.modal-footer{
  border-top: 1px solid var(--border-soft);
}

/* Si tu mostrarPopup usa alertas o contenedores propios,
   aquí puedes enganchar clase .popup-app (si la tienes) */
.popup-app{
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-soft);
}

/* Botones dentro de modales/popup: mismo alto que navbar */
.modal .btn{
  min-height: 34px;
}


/* =========================================================
   6) OVERLAY RESERVA
   ========================================================= */
#overlayReserva {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#overlayReserva .contenido-overlay {
  background: #fff;
  padding: 2rem;
  border-radius: var(--radius-0);
  text-align: center;
  max-width: 420px;
  width: 92%;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-soft);
}

#div-boton-cancelar-wrapper.d-none { display: none; }


/* =========================================================
   7) FULLCALENDAR (general)
   ========================================================= */
#calendario {
  max-width: 100%;
  margin: 0 auto;
  height: 600px;
}

/* Textos en eventos (permitir 2 líneas) */
.fc-event-title,
.fc-event-title-container {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.2 !important;
}

/* Negrita en vista semanal */
.fc-timegrid-event .fc-event-title,
.fc-timegrid-event .fc-event-time {
  font-weight: bold !important;
}

/* Móvil: texto de eventos más pequeño */
@media (max-width: 480px) {
  .fc .fc-event-title { font-size: 11px !important; }
}


/* =========================================================
   8) FULLCALENDAR (solo lectura en modal)
   ========================================================= */
#calendario-profesional {
  max-width: 900px;
  margin: 0 auto;
}
#calendario-profesional-inner .fc { font-size: 0.85rem; }

/* Compactar calendario dentro del modal */
#calendario-centro-modal-inner .fc { font-size: 12px !important; }
#calendario-centro-modal-inner .fc-daygrid-day {
  height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
}
#calendario-centro-modal-inner .fc-daygrid-body tr { height: 60px !important; }
#calendario-centro-modal-inner .fc-daygrid-event {
  font-size: 11px !important;
  padding: 2px 3px !important;
}
#calendario-centro-modal-inner .fc-timegrid-slot {
  height: 18px !important;
  min-height: 18px !important;
}


/* =========================================================
   9) GRID CONFIG SLOTS
   ========================================================= */
#tabla-config-slots {
  table-layout: fixed;
  font-size: 0.8rem;
}
#tabla-config-slots th,
#tabla-config-slots td { padding: 0.25rem; }

#tabla-config-slots .hora-col,
#tabla-config-slots .hora-rango {
  width: 120px;
  white-space: nowrap;
}
#tabla-config-slots .dia-col,
#tabla-config-slots .slot-celda { width: 38px; }

.slot-celda { cursor: pointer; height: 26px; }
.slot-celda.slot-activo { background-color: var(--btn-green); color: #fff; }


/* =========================================================
   10) POPOVER DETALLE
   ========================================================= */
.popover-detalle { max-width: 420px; }
.popover-detalle .popover-body { font-size: 0.85rem; padding: 12px 14px; }
.popover-detalle .popover-header { font-size: 0.9rem; font-weight: 700; }


/* ===== Ajustes solicitados (sin cambiar tamaños/espacios) ===== */

/* 1) Inputs / selects / search: sin bordes negros, fino y elegante */
.dt-container .dt-search input,
.dt-container .dt-length select,
.dt-container select,
.dt-container input{
  border: 1px solid #d7dde5 !important;
  box-shadow: none !important;
  outline: none !important;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus,
.dt-container select:focus,
.dt-container input:focus{
  border-color: #bfc8d4 !important;
  box-shadow: none !important;
}

/* 2) Colores suaves diferenciados (solo color, no tamaños) */

/* Barra superior */
.dt-container > .row.mb-2{
  background: #f6f7f9; /* más suave */
}
.dt-container .row.mb-2 > .col-sm-12.col-md-6{
  background: transparent !important; /* evita “doble bloque” */
}

/* Cabecera */
.dt-container table.dataTable thead th{
  background-color: #f2f4f7 !important;
}

/* Alternas */
.dt-container table.dataTable tbody tr:nth-child(odd){
  background-color: #ffffff !important;
}
.dt-container table.dataTable tbody tr:nth-child(even){
  background-color: #f7f9fc !important;
}

/* Barra inferior */
.dt-container .dt-info,
.dt-container .dt-paging{
  background: #f6f7f9 !important;
}



/* =========================
   DATATABLES - caja exterior (todas las tablas)
   ========================= */
.dt-container{
  background: #f6f7f9;
  border: 1px solid #dfe5ec;
  padding: 0;
  border-radius: 0;
}

/* Barra superior (mostrar registros + buscar) */
.dt-container > .row.mb-2{
  background: #f6f7f9;
  padding: 12px;
  margin: 0;
}

/* Zona central (tabla) */
.dt-container .dt-layout-row{
  padding: 0 10px;
}

/* Barra inferior */
.dt-container > .row.mt-2{
  padding: 8px 10px 12px 10px;
  margin: 0;
}


/* =========================
   PAGINACIÓN (sin duplicados y sin bordes negros)
   ========================= */
.dt-container .dt-paging .dt-paging-button{
  background: #ffffff !important;
  border: 1px solid #d7dde5 !important;
  color: #495057 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
}

.dt-container .dt-paging .dt-paging-button:hover{
  background: #eef1f4 !important;
  border-color: #c7d0db !important;
  color: #212529 !important;
}

.dt-container .dt-paging .dt-paging-button.current{
  background: #e5e9ef !important;
  border-color: #c7d0db !important;
  color: #212529 !important;
  font-weight: 700;
}

.dt-container .dt-paging .dt-paging-button.disabled{
  background: #ffffff !important;
  border-color: #e2e7ee !important;
  color: #adb5bd !important;
  opacity: .6;
  cursor: not-allowed !important;
}


/* =========================
   BOTÓN "VER" (UNIFICADO)
   - Aplica a .btn-ver-reserva y .btn-ver-reserva-cirujano
   - Da igual en qué tabla esté (mientras sea DataTables)
   ========================= */
.dt-container .btn-ver-reserva,
.dt-container .btn-ver-reserva-cirujano{
  background: #ffffff !important;
  border: 1px solid #cfe3ef !important;   /* borde fino */
  color: #0b7285 !important;              /* azul verdoso sobrio */
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 3px 10px !important;
  font-weight: 700;
}

.dt-container .btn-ver-reserva:hover,
.dt-container .btn-ver-reserva-cirujano:hover{
  background: #e7f5ff !important;
  border-color: #9fd0ea !important;
  color: #095c6a !important;
}


/* =========================================================
   12) PANEL CONFIGURACION
   ========================================================= */
#panel-configuracion .tab-content {
  background-color: transparent;
  border-radius: var(--radius-0);
}
#panel-configuracion .config-card {
  background-color: var(--bg-soft);
  border-radius: var(--radius-0);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-soft);
}
#panel-configuracion .config-card .form-control,
#panel-configuracion .config-card .form-select { background-color: #fff; }


/* =========================================================
   13) DETALLE CIRUJANO
   ========================================================= */
.detalle-cirujano-wrapper {
  background-color: var(--bg-soft);
  padding: 16px;
  border-radius: var(--radius-0);
  margin-top: 10px;
  border: 1px solid var(--border-soft);
}

.detalle-cirujano-header {
  background-color: #e9ecef;
  border-radius: var(--radius-0);
  padding: 8px 12px;
  border: 1px solid #d0d4da;
}

.detalle-cirujano-contenido .card {
  border-radius: var(--radius-0);
  border: 1px solid #dee2e6;
}

.detalle-cirujano-contenido .card-header {
  background-color: #f0f2f5;
  border-bottom: 1px solid #dee2e6;
  font-size: 0.95rem;
  font-weight: 700;
}

.detalle-cirujano-contenido .card-body { font-size: 0.92rem; }

.detalle-cirujano-header .btn {
  border-radius: var(--radius-0) !important; /* unificar */
  padding: 4px 10px;
  font-size: 0.90rem;
}

#cx-detalle-documentos { padding-left: 18px; }
#cx-detalle-documentos .btn-outline-danger {
  font-size: 0.80rem;
  padding: 0.25rem 0.5rem;
}


/* =========================================================
   14) PAGE BREAK (PDF)
   ========================================================= */
#ci_page_break{
  height: 1px;
  break-before: page;
  page-break-before: always;
  break-after: page;
  page-break-after: always;
}


/* =========================================================
   15) MODALES DOCUMENTO (ACEPTACION / CESION / ANESTESIA)
   Tipo “papel” + inputs con línea inferior
   ========================================================= */
#modalGenerarAceptacion canvas,
#modalGenerarCesion canvas,
#modalGenerarAnestesia canvas{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  box-sizing:border-box;
}

#modalGenerarAceptacion .modal-dialog,
#modalGenerarCesion .modal-dialog,
#modalGenerarAnestesia .modal-dialog{
  max-width: 1100px !important;
  width: 95% !important;
}

#modalGenerarAceptacion .modal-body,
#modalGenerarCesion .modal-body,
#modalGenerarAnestesia .modal-body{
  padding: 40px 70px !important;
}

#modalGenerarAceptacion .modal-content,
#modalGenerarCesion .modal-content,
#modalGenerarAnestesia .modal-content{
  background-color: #fcfaf6 !important;
  border-radius: 12px; /* papel */
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Inputs estilo documento médico */
#modalGenerarAceptacion input,
#modalGenerarCesion input,
#modalGenerarAnestesia input{
  border: none !important;
  border-bottom: 1px solid #999 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
  font-size: 14px;
  outline: none !important;
}

#modalGenerarAceptacion input:focus,
#modalGenerarCesion input:focus,
#modalGenerarAnestesia input:focus{
  border-bottom: 1px solid #555 !important;
  box-shadow: none !important;
}

#modalGenerarAceptacion input::placeholder,
#modalGenerarCesion input::placeholder,
#modalGenerarAnestesia input::placeholder{
  color: #bbb;
}

/* Popup tipo toast (app) */
.popup-app{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;

  max-width: 420px;
  min-width: 260px;

  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;

  padding: 10px 12px !important;
  font-size: 14px;
  font-weight: 600;

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}

/* Estado visible */
.popup-app.show{
  opacity: 1;
  transform: translateY(0);
}

/* Botón nueva intervención (verde suave + icono blanco controlado) */
#btn-nueva-intervencion.btn-nueva-intervencion{
  background: #198754;
  border: 1px solid #198754;
  color: #fff;
  border-radius: 0;
}

#btn-nueva-intervencion.btn-nueva-intervencion:hover{
  filter: brightness(.95);
}

/* SVG blanco */
#btn-nueva-intervencion .icono-nav svg{
  width: 16px;
  height: 16px;
  display: block;
  fill: #fff;
}


/* =========================================================
   16) MODAL CONFIRMACION sobre modales
   ========================================================= */
#modalConfirmacion { z-index: 1065 !important; }
#modalConfirmacion + .modal-backdrop { z-index: 1060 !important; }

/* Modal confirmación: look panel (igual que DataTables) */
#modalConfirmacion .modal-content{
  border-radius: 0 !important;
  border: 1px solid #dfe5ec !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}

#modalConfirmacion .modal-header,
#modalConfirmacion .modal-footer{
  background: #f6f7f9 !important;
  border-color: #dfe5ec !important;
}

#modalConfirmacion .modal-body{
  background: #ffffff !important;
}

/* Acento por tipo (línea superior) */
#modalConfirmacion.modal-confirm-info    .modal-content{ border-top: 4px solid #0d6efd !important; }
#modalConfirmacion.modal-confirm-warning .modal-content{ border-top: 4px solid #f0ad4e !important; }
#modalConfirmacion.modal-confirm-danger  .modal-content{ border-top: 4px solid #dc3545 !important; }
#modalConfirmacion.modal-confirm-success .modal-content{ border-top: 4px solid #198754 !important; }

/* Botones rectos y compactos */
#modalConfirmacion .btn{
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 34px;
}

table { font-size: 0.85rem; }

/* calendarios */
/* ===== FullCalendar compacto ===== */

/* Texto general */
.fc { font-size: 0.85rem; }

/* Toolbar (titulo y botones) más pequeño */
.fc .fc-toolbar-title { font-size: 1.05rem; }
.fc .fc-button {
  padding: 0.25rem 0.45rem;
  font-size: 0.85rem;
}

/* Cabecera días semana */
.fc .fc-col-header-cell-cushion { padding: 4px 6px; }

/* Celdas del mes: reduce altura/padding */
.fc .fc-daygrid-day-frame { min-height: 70px; }
.fc .fc-daygrid-day-top { padding: 2px 4px; }
.fc .fc-daygrid-day-number { padding: 2px 4px; }

/* Eventos en mes más compactos */
.fc .fc-daygrid-event{
  margin-top: 2px;
  padding: 1px 4px;
  font-size: 0.8rem;
  line-height: 1.1;
}

/* Vista semana/día: reduce altura de slots */
.fc .fc-timegrid-slot { height: 28px; }
.fc .fc-timegrid-slot-label {
  font-size: 0.8rem;
  padding: 0 6px;
}
.fc .fc-timegrid-event .fc-event-main{
  padding: 2px 4px;
  font-size: 0.82rem;
}

/* ===== Grid configuracion (horas x dias) compacto ===== */
.grid-calendario-config,
.tabla-calendario-config,
#tabla-calendario-config{
  font-size: 0.82rem;
}

.grid-calendario-config td,
.grid-calendario-config th,
.tabla-calendario-config td,
.tabla-calendario-config th,
#tabla-calendario-config td,
#tabla-calendario-config th{
  padding: 0.25rem 0.35rem;
  line-height: 1.1;
}

.grid-calendario-config td{ height: 28px; }

.grid-calendario-config td .texto-celda,
.grid-calendario-config td span,
.grid-calendario-config td small{
  font-size: 0.78rem;
}

.fc .fc-daygrid-day-frame { min-height: 75px; }
.fc .fc-daygrid-day-events { margin: 2px 2px 0 2px; }
.fc .fc-daygrid-event { padding: 1px 4px; line-height: 1.05; font-size: 0.78rem; }

div.dt-container div.dt-search input {
    margin-left: .5em!important;
}

div.dt-container div.dt-search {
    font-size: .85em!important;
}

div.dt-container div.dt-search input {
 
    margin-bottom: 2px!important;
    padding: 2px!important;
}

.filtros-reservas-extra {
  font-size: .85em!important;
}  

.dt-length {
      font-size: .85em!important;
    
}
div.dt-container div.dt-info {
    padding-top: .85em!important;
    font-size: .85em!important;
}
.dt-paging {font-size:.8em!important;
    margin-top: 8px!important;}
    
.dt-container {

    padding: 12px 12px 0px 12px!important;

}
canvas {
  touch-action: none;
}