/* ==========================================================================
   Interiores Murcia - tema Bootstrap 5 (rediseño). Ver DISENO-PROPUESTA.md.
   Se carga DESPUÉS de bootstrap 5, bootstrap-icons y dataTables.bootstrap5.
   1. Tokens   2. Base   3. Navbar   4. Cabecera de página y cards
   5. Tablas / DataTables   6. Botones   7. Modales y formularios
   8. Overlays de carga   9. Compatibilidad BS3 (markup generado por JS)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --app-primary: #0a6e94;
  --app-primary-rgb: 10, 110, 148;
  --app-primary-hover: #085a79;
  --app-primary-soft: #e7f2f7;
  --app-accent: #4aa8d2;          /* el azul histórico de .btn-fcc */
  --app-ink: #1e293b;
  --app-text: #334155;
  --app-muted: #64748b;
  --app-border: #e2e8f0;
  --app-surface: #ffffff;
  --app-bg: #f4f6f9;
  --app-radius: .5rem;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);

  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-bg);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius);
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
}

/* 2. Base ------------------------------------------------------------------ */
body { min-height: 100vh; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--app-ink); font-weight: 600; }
.bi { line-height: 1; vertical-align: -.125em; }
.form-control:focus, .form-select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18);
}

/* 3. Navbar ---------------------------------------------------------------- */
.app-navbar {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.app-navbar .navbar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--app-ink); font-size: 1.05rem; }
.app-navbar .navbar-brand img { height: 34px; width: auto; }
.app-navbar .nav-link {
  color: var(--app-text);
  font-weight: 600;
  padding: .55rem .7rem;
  border-radius: .375rem;
}
.app-navbar .nav-link .bi { color: var(--app-muted); margin-right: .15rem; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus { color: var(--app-primary); background: var(--app-primary-soft); }
.app-navbar .nav-link.active, .app-navbar .nav-link.show { color: var(--app-primary); background: var(--app-primary-soft); }
.app-navbar .nav-link.active .bi, .app-navbar .nav-link:hover .bi { color: var(--app-primary); }
.app-navbar .dropdown-menu { border-color: var(--app-border); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); font-size: .9375rem; }
.app-navbar .dropdown-item .bi { color: var(--app-muted); margin-right: .35rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--app-primary); }

/* 4. Cabecera de página y cards -------------------------------------------- */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem; padding: 1.5rem 0 1rem;
}
.page-header h1 { font-size: 1.6rem; margin: 0; }
.page-header .page-subtitle { color: var(--app-muted); margin: .15rem 0 0; }
.card { border-color: var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.card-header { background: var(--app-surface); border-bottom-color: var(--app-border); font-weight: 600; color: var(--app-ink); }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 1.25rem 0 .6rem;
}
.section-head h3, .section-head h4 { font-size: 1.05rem; margin: 0; }
.info-list { margin: 0; }
.info-list td { padding: .45rem .5rem; border-color: var(--app-border); }
.info-list td:first-child { color: var(--app-muted); white-space: nowrap; width: 1%; }
.info-list td:first-child .bi { color: var(--app-primary); margin-right: .35rem; }
.map-frame { border: 1px solid var(--app-border); border-radius: var(--app-radius); overflow: hidden; }

/* 5. Tablas / DataTables --------------------------------------------------- */
.table { --bs-table-color: var(--app-text); font-variant-numeric: tabular-nums; }
.table > thead th {
  color: var(--app-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; background: #f8fafc; border-bottom-width: 1px; white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--app-primary-soft); }
.card .dataTables_wrapper { padding: 1rem 1.25rem .75rem; }
.dataTables_wrapper .dataTables_filter input { min-width: 240px; }
.dataTables_wrapper .dataTables_info { color: var(--app-muted); padding-top: .85rem; white-space: normal !important; }
.dataTables_wrapper .pagination { --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-color: var(--app-primary); }
.dataTables_wrapper .dataTables_processing { border: 1px solid var(--app-border); box-shadow: var(--app-shadow); }
table.dataTable > tbody > tr > td:last-child { text-align: right; }
table.dataTable > tbody > tr.dtrg-group > th { background: var(--app-primary-soft); color: var(--app-ink); font-weight: 600; }

/* 6. Botones --------------------------------------------------------------- */
.btn { font-weight: 600; }
.btn-primary, .btn-fcc {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; }

/* 7. Modales y formularios ------------------------------------------------- */
.modal-content { border: 0; border-radius: .75rem; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.modal-header { border-bottom-color: var(--app-border); padding: .9rem 1.25rem; }
.modal-title { font-size: 1.15rem; font-weight: 600; color: var(--app-ink); }
.modal-footer { border-top-color: var(--app-border); background: #f8fafc; border-radius: 0 0 .75rem .75rem; }
.modal .nav-tabs, .app-tabs { border-bottom-color: var(--app-border); }
.modal .nav-tabs .nav-link, .app-tabs .nav-link { color: var(--app-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; }
.modal .nav-tabs .nav-link:hover, .app-tabs .nav-link:hover { color: var(--app-primary); }
.modal .nav-tabs .nav-link.active, .app-tabs .nav-link.active { color: var(--app-primary); border-bottom-color: var(--app-primary); background: transparent; }
.col-form-label, .form-label { font-weight: 600; color: var(--app-ink); }
/* multiselect / bootstrap-select ocupan el ancho de su columna */
.multiselect-native-select .btn-group, .bootstrap-select.form-control { width: 100%; }
.multiselect-container { max-height: 320px; overflow-y: auto; }

/* 8. Overlays de carga (#fadeN / #modalN, controlados por openModalN()) ---- */
.app-loader-fade {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .35);
}
.app-loader {
  display: none; position: fixed; top: 50%; left: 50%; z-index: 2001;
  transform: translate(-50%, -50%); min-width: 260px; max-width: 90vw;
  padding: 1.5rem 1.75rem; text-align: center; color: var(--app-ink);
  background: var(--app-surface); border-radius: .75rem; box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
  font-size: 1rem; font-weight: 600;
}
.app-loader img { margin-top: .75rem; }

/* 9. Compatibilidad BS3 ---------------------------------------------------- */
/* El JS existente (sin tocar) y los endpoints generan markup BS3; aquí se
   traduce visualmente para que conviva con BS5. */
.btn-xs, .btn-group-xs > .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .8rem; --bs-btn-border-radius: .25rem; }
.btn-default { --bs-btn-color: var(--app-text); --bs-btn-bg: #fff; --bs-btn-border-color: #cbd5e1; --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-border-color: #cbd5e1; --bs-btn-active-bg: #e2e8f0; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.hidden { display: none !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-circle { border-radius: 50%; }
/* button.close + × (BS3) de los fragmentos que se cargan por AJAX en un modal */
button.close { float: right; padding: 0 .25rem; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--app-ink); background: transparent; border: 0; opacity: .5; }
button.close:hover { opacity: .85; }
/* filas contextuales BS3 (tr.info / tr.danger) y fila de especialista */
.table > tbody > tr.info > * { --bs-table-bg-state: var(--bs-info-bg-subtle); }
.table > tbody > tr.danger > * { --bs-table-bg-state: var(--bs-danger-bg-subtle); }
.table > tbody > tr.especialistarow > * { --bs-table-bg-state: #d9edf7; }
/* filas/celdas con bgcolor que genera el JS (cuadros de elementos de las inspecciones):
   las celdas BS5 son opacas, se dejan transparentes para que se vea el color de la fila */
.table > tbody > tr[bgcolor] > * { --bs-table-bg: transparent; }
.table > tbody > tr > [bgcolor="#E6E6E6" i] { --bs-table-bg: #e6e6e6; }
/* glyphicons -> Bootstrap Icons (los que genera el JS de las páginas BS5) */
.glyphicon { display: inline-block; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal !important; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; }
.glyphicon-info-sign::before { content: "\f431"; }   /* bi-info-circle */
.glyphicon-remove::before { content: "\f659"; }      /* bi-x-lg */
.glyphicon-remove-circle::before { content: "\f623"; } /* bi-x-circle */
.glyphicon-edit::before { content: "\f4ca"; }        /* bi-pencil-square */
.glyphicon-user::before { content: "\f4e1"; }        /* bi-person */
.glyphicon-tag::before { content: "\f5b0"; }         /* bi-tag */
.glyphicon-phone::before { content: "\f4e7"; }       /* bi-phone */
.glyphicon-phone-alt::before { content: "\f5c1"; }   /* bi-telephone */
.glyphicon-envelope::before { content: "\f32f"; }    /* bi-envelope */
.glyphicon-comment::before { content: "\f252"; }     /* bi-chat-left-text */
.glyphicon-calendar::before { content: "\f214"; }    /* bi-calendar3 */
.glyphicon-plus::before { content: "\f64d"; }        /* bi-plus-lg */
.glyphicon-time::before { content: "\f293"; }        /* bi-clock */
.glyphicon-map-marker::before { content: "\f3e8"; }  /* bi-geo-alt */
.glyphicon-chevron-up::before { content: "\f286"; }  /* bootstrap-timepicker */
.glyphicon-chevron-down::before { content: "\f282"; }
/* bootstrap-timepicker busca .input-group-addon (BS3) para abrirse al pulsar el icono;
   en las páginas BS5 se pone junto a .input-group-text, que manda en el estilo */
.input-group-addon:not(.input-group-text) { display: flex; align-items: center; padding: .375rem .75rem; color: var(--app-muted); background: #f8fafc; border: 1px solid var(--bs-border-color); border-left: 0; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
.bootstrap-timepicker-widget.dropdown-menu.open { display: inline-block; }

/* 10. Estados de incidencias / órdenes de trabajo ------------------------- */
/* Mismos colores que las páginas BS3. En BS5 el fondo lo pintan las celdas
   (--bs-table-bg), no el <tr>: se pasa el color de la fila a sus celdas. */
.pdteasignacion { --estado-bg: #9b59b6; --estado-color: #fff; }
.pdteresolucion { --estado-bg: #f9f9f9; --estado-color: #000; }
.rechazada      { --estado-bg: #f45a56; --estado-color: #fff; }
.pdtevb         { --estado-bg: #5cb85c; --estado-color: #fff; }
.terminada      { --estado-bg: #0275d8; --estado-color: #fff; }
.anulada        { --estado-bg: #8da0a9; --estado-color: #fff; }
.caducada       { --estado-bg: #7f7f7f; --estado-color: #fff; }
.table > tbody > tr:is(.pdteasignacion, .pdteresolucion, .rechazada, .pdtevb, .terminada, .anulada, .caducada) > * {
  --bs-table-bg: var(--estado-bg); --bs-table-color: var(--estado-color); border-bottom-color: rgba(255, 255, 255, .35);
}
.table-hover > tbody > tr:is(.pdteasignacion, .pdteresolucion, .rechazada, .pdtevb, .terminada, .anulada, .caducada):hover > * { --bs-table-bg-state: rgba(0, 0, 0, .07); }
.estado-leyenda { display: flex; flex-wrap: wrap; gap: .4rem; }
.estado-badge {
  display: inline-block; padding: .3rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--estado-bg); color: var(--estado-color); border: 1px solid rgba(15, 23, 42, .08);
}
.app-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 7000; min-width: 320px; max-width: 90vw; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.app-wait { position: fixed; inset: 0; z-index: 1000; background: url('../img/loading.gif') 50% 50% no-repeat; }

/* 11. Acceso: login (index.html), error de login (denegar.php) y sesión caducada */
.app-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
  background: radial-gradient(1100px 520px at 15% -10%, var(--app-primary-soft), transparent 65%), var(--app-bg);
}
.app-auth-card { width: 100%; max-width: 420px; border: 0; border-radius: .75rem; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 23, 42, .14); }
.app-auth-card .card-body { padding: 2rem; }
.app-auth-accent { height: 4px; background: linear-gradient(90deg, var(--app-primary), var(--app-accent)); }
.app-auth-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 2rem; border-bottom: 1px solid var(--app-border); }
.app-auth-brand img { height: 52px; width: auto; }
.app-auth-logo { height: 56px; width: auto; margin-bottom: 1rem; }
.app-auth-title { font-size: 1.35rem; margin: 0 0 .25rem; }
.app-auth-sub { color: var(--app-muted); margin-bottom: 1.5rem; }
.app-auth-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem;
  border-radius: 50%; font-size: 1.6rem; background: var(--app-primary-soft); color: var(--app-primary);
}
.app-auth-icon.is-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.app-auth-foot { margin-top: 1.25rem; text-align: center; font-size: .8rem; color: var(--app-muted); }
/* el mismo aviso dentro del modal de una página (fragmentos que se cargan por AJAX) */
.app-sesion-modal { max-width: 440px; margin: 0 auto; padding: 2.5rem 2rem; text-align: center; }