/* ── Fase 2: Catálogos + Nueva OT — estilos adicionales ── */

/* ══ TABS ══════════════════════════════════════════════ */
.tabs-bar { display:flex; gap:.25rem; border-bottom:2px solid #f0f0f0; margin-bottom:1.5rem; }
.tab-btn {
  padding:.6rem 1.1rem; font-size:.85rem; font-weight:500;
  color:#6b7280; border-radius:.5rem .5rem 0 0;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all .2s; cursor:pointer;
}
.tab-btn:hover { color:#2563eb; background:#f5f8ff; }
.tab-btn.active { color:#2563eb; font-weight:700; border-bottom-color:#2563eb; background:#eff6ff; }

/* ══ TABLA CRUD ═════════════════════════════════════════ */
.crud-table { width:100%; border-collapse:collapse; font-size:.83rem; }
.crud-table th {
  padding:.65rem 1rem; text-align:left;
  font-weight:600; color:#6b7280; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em;
  background:#f9fafb; border-bottom:1px solid #f0f0f0;
}
.crud-table td { padding:.7rem 1rem; border-bottom:1px solid #f9fafb; color:#374151; vertical-align:middle; }
.crud-table tr:hover td { background:#f9fafb; }
.crud-table tr:last-child td { border-bottom:none; }

/* ══ BUSCADOR (Estilos movidos a style.css) ═══════════════ */

/* ══ BOTONES DE ACCIÓN ══════════════════════════════════ */
.btn-sm {
  padding:.35rem .75rem; border-radius:.5rem;
  font-size:.78rem; font-weight:600; transition:all .15s;
  display:inline-flex; align-items:center; gap:.3rem;
}
.btn-edit   { background:#fffbeb; color:#d97706; border:1px solid #fde68a; }
.btn-edit:hover { background:#fef3c7; }
.btn-delete { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.btn-delete:hover { background:#fee2e2; }
.btn-add {
  padding:.6rem 1.1rem; background:#2563eb; color:#fff;
  border-radius:.75rem; font-size:.85rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:all .2s; box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.btn-add:hover { background:#1d4ed8; transform:translateY(-1px); }

/* ══ PAGINACIÓN ═════════════════════════════════════════ */
.pagination { display:flex; align-items:center; gap:.35rem; justify-content:flex-end; padding:.85rem 1rem 0; }
.page-btn {
  width:32px; height:32px; border-radius:.5rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:600; color:#6b7280;
  border:1px solid #e5e7eb; transition:all .15s;
}
.page-btn:hover { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.page-btn.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.page-info { font-size:.78rem; color:#9ca3af; padding:0 .5rem; }

/* ══ MODAL ══════════════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px); z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:1rem; animation:fade-in .15s ease;
}
.modal-box {
  background:#fff; border-radius:1.25rem;
  width:100%; max-width:560px; max-height:90vh;
  overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.18);
  animation:slide-up .25s ease;
}
.modal-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid #f3f4f6;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:2;
}
.modal-title { font-size:1rem; font-weight:700; color:#111827; display:flex; align-items:center; gap:.5rem; }
.modal-body  { padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.modal-footer{ padding:1rem 1.5rem; border-top:1px solid #f3f4f6; display:flex; gap:.75rem; justify-content:flex-end; }
.modal-close { width:32px; height:32px; border-radius:.5rem; color:#9ca3af; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.modal-close:hover { background:#f3f4f6; color:#374151; }

/* ══ FORMULARIOS MODAL ══════════════════════════════════ */
.field-group  { display:flex; flex-direction:column; gap:.35rem; }
.field-label  { font-size:.78rem; font-weight:600; color:#374151; }
.field-input, .field-select, .field-textarea {
  padding:.65rem .9rem; border:1.5px solid #e5e7eb;
  border-radius:.65rem; font-size:.85rem; color:#111827;
  outline:none; transition:border-color .2s, box-shadow .2s;
  font-family:'Inter', sans-serif; width:100%;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.field-textarea { resize:vertical; min-height:80px; }
.field-hint { font-size:.72rem; color:#9ca3af; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.field-char-count { font-size:.7rem; color:#9ca3af; text-align:right; }
.field-char-count.warn { color:#f59e0b; }
.field-char-count.over { color:#ef4444; }

/* ══ CONFIRM DELETE ═════════════════════════════════════ */
.confirm-box {
  background:#fff; border-radius:1rem; padding:1.75rem;
  max-width:400px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.18);
  animation:slide-up .2s ease; text-align:center;
}
.confirm-icon { width:52px; height:52px; border-radius:50%; background:#fef2f2; color:#dc2626; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin:0 auto 1rem; }
.confirm-title { font-size:1rem; font-weight:700; color:#111827; margin-bottom:.5rem; }
.confirm-desc  { font-size:.85rem; color:#6b7280; margin-bottom:1.25rem; }
.confirm-btns  { display:flex; gap:.75rem; justify-content:center; }
.btn-cancel-modal { padding:.65rem 1.25rem; border:1.5px solid #e5e7eb; border-radius:.75rem; font-size:.85rem; font-weight:600; color:#6b7280; transition:all .15s; }
.btn-cancel-modal:hover { background:#f9fafb; }
.btn-confirm-delete { padding:.65rem 1.25rem; background:#dc2626; color:#fff; border-radius:.75rem; font-size:.85rem; font-weight:600; transition:all .15s; }
.btn-confirm-delete:hover { background:#b91c1c; }

/* ══ TOAST ══════════════════════════════════════════════ */
#toastContainer { position:fixed; bottom:1.5rem; right:1.5rem; z-index:999; display:flex; flex-direction:column; gap:.5rem; }
.toast {
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.25rem; border-radius:.85rem;
  font-size:.85rem; font-weight:500; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.15); min-width:260px;
  animation:slide-up .25s ease;
}
.toast-success { background:#10b981; }
.toast-error   { background:#ef4444; }
.toast-info    { background:#2563eb; }
.toast-warn    { background:#f59e0b; }

/* ══ NUEVA OT — FORMULARIO ══════════════════════════════ */
.ot-form { display:flex; flex-direction:column; gap:1.5rem; }
.form-section {
  background:#fff; border-radius:1rem; border:1px solid #f3f4f6;
  box-shadow:0 1px 4px rgba(0,0,0,.06); overflow:visible;
}
.form-section-header {
  padding:1rem 1.25rem; background:#f9fafb;
  border-bottom:1px solid #f0f0f0;
  display:flex; align-items:center; gap:.6rem;
}
.form-section-num {
  width:26px; height:26px; border-radius:50%;
  background:#2563eb; color:#fff;
  font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.form-section-title { font-size:.9rem; font-weight:700; color:#111827; }
.form-section-body  { padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }

/* OT — campo de solo lectura */
.field-readonly {
  padding:.65rem .9rem; background:#f3f4f6;
  border:1.5px solid #e5e7eb; border-radius:.65rem;
  font-size:.85rem; color:#6b7280; font-weight:500;
}

/* OT — Autocomplete */
.autocomplete-wrap { position:relative; }
.autocomplete-list {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1.5px solid #dbeafe;
  border-radius:.75rem; box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:50; max-height:220px; overflow-y:auto;
}
.autocomplete-item {
  padding:.65rem 1rem; font-size:.84rem; cursor:pointer;
  display:flex; flex-direction:column; gap:.1rem; transition:background .1s;
}
.autocomplete-item:hover, .autocomplete-item.active { background:#eff6ff; }
.autocomplete-item .ac-main { font-weight:600; color:#111827; }
.autocomplete-item .ac-sub  { font-size:.75rem; color:#9ca3af; }
.autocomplete-item mark { background:transparent; color:#2563eb; font-weight:700; }

/* ══ MAPEO DENTAL ════════════════════════════════════════ */
.mapeo-wrapper { display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.mapeo-col-izq { flex:1; min-width:240px; }
.mapeo-col-der { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }

.mapeo-container {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.mapeo-label-top    { font-size:10px; font-weight:600; color:#9ca3af; letter-spacing:.05em; text-transform:uppercase; }
.mapeo-label-bottom { font-size:10px; font-weight:600; color:#9ca3af; letter-spacing:.05em; text-transform:uppercase; }
.mapeo-middle-row   { display:flex; align-items:center; gap:.4rem; }
.mapeo-label-side   { font-size:10px; font-weight:600; color:#9ca3af; writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.05em; text-transform:uppercase; }

/* SVG tooth grid */
.tooth-svg { width:160px; height:200px; cursor:default; }
.tooth-cell { transition:all .2s; cursor:pointer; }
.tooth-cell:hover rect { fill:#dbeafe; stroke:#93c5fd; }
.tooth-cell.selected rect { fill:#dbeafe; stroke:#93c5fd; stroke-width:1.5; }
.tooth-cell.selected .cell-label { fill:#1e40af; font-weight:700; }
.cell-label { fill:#d1d5db; font-size:9px; font-family:'Inter',sans-serif; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.cell-label.has-text { fill:#1e40af; font-weight:600; }

/* Input dentro celda */
.cell-input-overlay {
  position:absolute; background:#fff;
  border:2px solid #2563eb; border-radius:.5rem;
  padding:.35rem .5rem; font-size:.75rem; width:130px;
  box-shadow:0 4px 16px rgba(37,99,235,.2);
  z-index:20; outline:none;
}

/* Leyenda mapeo */
.mapeo-legend { display:flex; gap:1rem; margin-top:.75rem; justify-content:center; }
.legend-item  { display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:#6b7280; }
.legend-swatch{ width:14px; height:14px; border-radius:3px; }

/* ══ MATERIALES CHECKBOXES ══════════════════════════════ */
.materiales-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media(min-width:768px) { .materiales-grid { grid-template-columns:repeat(5,1fr); } }
.material-card {
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem; border:1.5px solid #e5e7eb;
  border-radius:.75rem; cursor:pointer; transition:all .2s;
  user-select:none;
}
.material-card:hover { border-color:#93c5fd; background:#eff6ff; }
.material-card.checked { border-color:#2563eb; background:#eff6ff; }
.material-card input[type=checkbox] { accent-color:#2563eb; width:16px; height:16px; flex-shrink:0; }
.material-card label { font-size:.83rem; font-weight:500; color:#374151; cursor:pointer; }

/* ══ UPLOAD PLACEHOLDER ═════════════════════════════════ */
.upload-zone {
  border:2px dashed #d1d5db; border-radius:.85rem;
  padding:2rem; text-align:center;
  background:#f9fafb; cursor:pointer;
  transition: all .2s ease;
}
.upload-zone:hover { border-color: #2563eb; background: #eff6ff; }
.upload-zone.drag-over { border-color: #2563eb; background: #dbeafe; transform: scale(1.01); }
.upload-zone i    { font-size:2rem; color:#d1d5db; margin-bottom:.75rem; transition: color .2s; }
.upload-zone:hover i { color: #2563eb; }
.upload-zone p    { font-size:.85rem; color:#9ca3af; margin:.25rem 0; }

.attached-files-list {
  display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem;
}
.file-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: #fff; border: 1px solid #e5e7eb;
  border-radius: .65rem; font-size: .85rem;
}
.file-info { display: flex; align-items: center; gap: .75rem; color: #374151; }
.file-info i { color: #9ca3af; font-size: 1rem; }
.file-remove { color: #ef4444; cursor: pointer; padding: .2rem; transition: opacity .2s; }
.file-remove:hover { opacity: .7; }

/* ══ OT — FECHAS (Flatpickr Premium Compacto Corregido) ══════ */
.datetime-split {
  display: flex;
  gap: .6rem;
  align-items: center;
}
.datetime-split .field-group-inner {
  position: relative;
  flex: 1;
}

/* Estilo para los inputs de Flatpickr */
.flatpickr-input + input {
  cursor: pointer !important;
  background-color: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  padding: 0.5rem 2.2rem 0.5rem 0.75rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  height: 38px !important;
}

.flatpickr-input + input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Iconos sobre los inputs */
.field-group-inner::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
  opacity: 0.6;
}

.field-group-inner:has(.date-picker-pretty)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

.field-group-inner:has(.time-picker-pretty)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Calendario Flatpickr - Dimensiones fijas sin escala para evitar parpadeo */
.flatpickr-calendar {
  font-family: 'Inter', sans-serif !important;
  border-radius: 1rem !important;
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e5e7eb !important;
  width: 280px !important; /* Ancho exacto para 7 días */
  padding: 0 !important;
}

.flatpickr-innerContainer { width: 280px !important; }
.flatpickr-days { width: 280px !important; }
.dayContainer { 
  width: 280px !important; 
  min-width: 280px !important; 
  max-width: 280px !important;
}

.flatpickr-day {
  height: 38px !important;
  line-height: 38px !important;
  font-size: 0.85rem !important;
  flex-basis: 14.28% !important; /* Fuerza 7 días por fila */
  max-width: 38px !important;
  margin: 1px 0 !important;
}

.flatpickr-day.selected { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
.flatpickr-day:hover { background: #eff6ff !important; border-color: #dbeafe !important; }

.flatpickr-months { background: #fff !important; border-radius: 1rem 1rem 0 0 !important; }
.flatpickr-months .flatpickr-month { height: 50px !important; }
.flatpickr-current-month { 
  font-size: 1.05rem !important; 
  font-weight: 700 !important; 
  padding: 12px 0 0 0 !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  position: relative;
  width: 100% !important; /* Asegura centrado total */
  left: 0 !important;
}

/* Selector de meses como botón limpio */
.flatpickr-month {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.flatpickr-current-month span.cur-month {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  margin-right: 5px !important;
}

.flatpickr-current-month span.cur-month:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* Año como botón limpio */
.cur-year {
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

.cur-year:hover { background: #f1f5f9 !important; }

/* Hacer que la cuadrícula de meses sea visible (cuando la implementemos en JS) */
.flatpickr-month-grid {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 99;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 10px;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  border-top: none;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.month-grid-item {
  padding: 8px 5px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.month-grid-item:hover {
  background: #eff6ff;
  color: #2563eb;
}

.month-grid-item.active {
  background: #2563eb;
  color: #fff;
}

.flatpickr-weekday { font-size: 0.75rem !important; font-weight: 700 !important; color: #64748b !important; }

/* Ajuste selector de hora */
.flatpickr-calendar.hasTime.noCalendar {
  width: 180px !important;
}
.flatpickr-calendar.hasTime.noCalendar .flatpickr-time {
  height: 40px !important;
  border-top: 0 !important;
}

.fecha-preview { 
  font-size: .7rem; 
  color: #1d4ed8; 
  font-weight: 600; 
  margin-top: .5rem; 
  min-height: 1.3rem; 
  background: #eff6ff;
  padding: .3rem .6rem;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid #dbeafe;
}

.fecha-preview:empty { display: none; }
.fecha-preview::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #3b82f6;
}

/* ══ OT — ACCIONES FINALES (Manejado por .btn-action global) ══════════════ */
.ot-actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:flex-end; padding:1rem 0; }

/* ══ PRIORITY BADGE ═════════════════════════════════════ */
.priority-select { display:flex; gap:.5rem; flex-wrap:wrap; }
.priority-opt {
  padding:.4rem .9rem; border-radius:99px; font-size:.78rem; font-weight:600;
  border:1.5px solid #e5e7eb; color:#6b7280; cursor:pointer; transition:all .15s;
}
.priority-opt.sel-normal  { background:#f0fdf4; color:#15803d; border-color:#86efac; }
.priority-opt.sel-alta    { background:#fffbeb; color:#b45309; border-color:#fcd34d; }
.priority-opt.sel-urgente { background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }

@media(max-width:767px) {
  .field-row { grid-template-columns:1fr; }
  .mapeo-wrapper { flex-direction:column; align-items:stretch; }
  .mapeo-col-izq { width:100%; }
  .ot-actions { justify-content:stretch; }
  .ot-actions button { flex:1; justify-content:center; }
}