/*
 * osd-skin.css — capa visual compartida (Opción A).
 * Solo estilos dentro de #page-content. No cambia markup ni IDs de JS.
 * Se carga después de estilos.css para corregir reglas legacy conflictivas.
 */

/* ------------------------------------------------------------------ */
/* Títulos: estilos.css pone h1/h3 en blanco y h2 en azul #102A78     */
/* ------------------------------------------------------------------ */
#page-content h1,
#page-content h3 {
	color: var(--text-main, #2d3748);
	text-shadow: none;
}

#page-content h2 {
	color: var(--text-main, #2d3748);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

/* ------------------------------------------------------------------ */
/* Tablas sin .table / .tiq-table: thead azul legacy → cabecera clara */
/* ------------------------------------------------------------------ */
#page-content table:not(.table):not(.tiq-table) thead {
	background-color: #F9F9F9;
	color: var(--text-main, #2d3748);
}

#page-content table:not(.table):not(.tiq-table) thead th,
#page-content table:not(.table):not(.tiq-table) thead > tr > th {
	color: var(--text-main, #2d3748);
	background-color: #F9F9F9;
	font-weight: 600;
}

#page-content table:not(.table):not(.tiq-table) thead th a {
	color: var(--text-main, #2d3748);
}

#page-content table:not(.table):not(.tiq-table) thead th a:hover {
	color: var(--orange, #EB8340);
}

/* Ancho: estilos.css limita tablas a 95% y celdas a 220px */
#page-content table {
	max-width: 100%;
}

#page-content table td,
#page-content table th {
	max-width: none;
	text-align: left;
}

#page-content table thead > tr > th {
	text-align: center !important;
}

#page-content table td.text-center,
#page-content table th.text-center,
#page-content table .td-icon,
#page-content table .th_icon {
	text-align: center;
}

#page-content table thead > tr > th.text-end,
#page-content table tbody td.text-end,
#page-content table tbody th.text-end,
#page-content table tbody td.dyn-num,
#page-content table tbody td.rt-ger-num,
#page-content table tbody td.rt-exp-num,
#page-content table tbody td.rt-dash-num,
#page-content table tbody td.col-tiq-min,
#page-content table tbody td.col-tiq-orden,
#page-content table tfoot td.text-end,
#page-content table tfoot th.text-end,
#page-content table tfoot td.dyn-num,
#page-content table tfoot td.rt-ger-num,
/* La fila de totales tiene que quedar bajo su columna: sin estas clases el pie
   heredaba el text-center de la tabla y "Horas Totales" pintaba las cifras
   corridas respecto de las de arriba (feedback ronda 2, punto 4). */
#page-content table tfoot td.col-tiq-min,
#page-content table tfoot td.col-tiq-orden,
#page-content table tfoot td.rt-exp-num,
#page-content table tfoot th.rt-exp-num,
#page-content table tfoot td.rt-dash-num {
	text-align: right !important;
}

/* ------------------------------------------------------------------ */
/* Contenedores / header legacy                                      */
/* ------------------------------------------------------------------ */
#page-content .container {
	background-color: transparent;
	min-height: 0;
}

#page-content header {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Superficies suaves (paneles y forms en tabla compartidos)         */
/* ------------------------------------------------------------------ */
#page-content .panel {
	background: var(--surface, #ffffff);
	border: 1px solid var(--border, #e6eaf0);
	border-radius: var(--radius-md, 12px);
	padding: 16px 20px;
	box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.07));
	margin-bottom: 1rem;
}

#page-content .tabla-nuevo-modificar,
#page-content table#tabla_nuevo_modificar,
#page-content table#tabla_ver {
	background: var(--surface, #ffffff);
	border-color: var(--border, #e6eaf0);
}

#page-content .tabla-nuevo-modificar th[scope="row"],
#page-content table#tabla_ver tbody > tr > th {
	text-align: left;
	color: var(--text-main, #2d3748);
	font-weight: 600;
	background: #fafbfc;
}

/* ------------------------------------------------------------------ */
/* 1b — Botones: redondeados, compactos; primario = naranja de marca  */
/* ------------------------------------------------------------------ */
#page-content .btn {
	border-radius: 18px;
	font-weight: 600;
	padding: 0.4rem 1rem;
	line-height: 1.35;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* BS2: btn-large aún aparece en super_admin */
#page-content .btn-large {
	padding: 0.55rem 1.25rem;
	font-size: 1rem;
}

/* Primario marca (y alias ya usado en pantallas migradas) */
#page-content .btn-primary,
#page-content .btn-tiq-orange {
	--bs-btn-color: #fff;
	--bs-btn-bg: #EB8340;
	--bs-btn-border-color: #EB8340;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #d67638;
	--bs-btn-hover-border-color: #d67638;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #d67638;
	--bs-btn-active-border-color: #c96d33;
	color: #fff;
	background-color: #EB8340;
	border-color: #EB8340;
}

#page-content .btn-primary:hover,
#page-content .btn-tiq-orange:hover {
	color: #fff;
	background-color: #d67638;
	border-color: #d67638;
}

/* Secundario: borde suave, hover naranja claro */
#page-content .btn-outline-secondary,
#page-content .btn-secondary {
	border-color: var(--border, #e6eaf0);
	color: var(--text-main, #2d3748);
	background-color: var(--surface, #ffffff);
}

#page-content .btn-outline-secondary:hover,
#page-content .btn-secondary:hover {
	border-color: rgba(235, 131, 64, 0.45);
	color: var(--orange, #EB8340);
	background-color: var(--orange-lt, #FFF2E9);
}

/* Peligro: se mantiene rojo; solo unifica radio/peso vía .btn */
#page-content .btn-danger {
	border-radius: 18px;
}

/* Éxito (añadir/guardar legacy): verde un poco más suave, misma forma */
#page-content .btn-success {
	border-radius: 18px;
}

/* ------------------------------------------------------------------ */
/* 1b — Inputs / selects / textareas (no checkbox/radio/file)         */
/* ------------------------------------------------------------------ */
#page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
#page-content select,
#page-content textarea,
#page-content .form-control {
	border: 1px solid var(--border, #e6eaf0);
	border-radius: var(--radius-sm, 8px);
	color: var(--text-main, #2d3748);
	background-color: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
#page-content select,
#page-content .form-control:not(textarea) {
	min-height: 38px;
	padding: 6px 10px;
}

#page-content textarea,
#page-content textarea.form-control {
	min-height: 80px;
	padding: 8px 10px;
}

#page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):focus,
#page-content select:focus,
#page-content textarea:focus,
#page-content .form-control:focus {
	border-color: rgba(235, 131, 64, 0.65);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(235, 131, 64, 0.2);
}

/* ------------------------------------------------------------------ */
/* 1b — Card reutilizable (filtros / bloques; opt-in con .osd-card)   */
/* ------------------------------------------------------------------ */
#page-content .osd-card {
	background: var(--surface, #ffffff);
	border: 1px solid var(--border, #e6eaf0);
	border-radius: var(--radius-md, 12px);
	padding: 20px 24px;
	box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.07));
	margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* 1b — Alertas en contenido (mensajes globales ya van en base.html) */
/* ------------------------------------------------------------------ */
#page-content .alert {
	border-radius: var(--radius-sm, 8px);
	box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.07));
}

#page-content .alert-error {
	color: #842029;
	background-color: #f8d7da;
	border: 1px solid #f5c2c7;
}

/* ------------------------------------------------------------------ */
/* Fase 3 — Forms/detalle compartidos (tabla_nuevo_modificar / ver)  */
/* ------------------------------------------------------------------ */
#page-content .tabla-nuevo-modificar,
#page-content .tabla-ver,
#page-content table#tabla_nuevo_modificar,
#page-content table#tabla_ver {
	width: 100%;
	max-width: 100%;
	background: var(--surface, #ffffff);
	border: 1px solid var(--border, #e6eaf0) !important;
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.07));
	margin-bottom: 0.5rem;
}

#page-content .tabla-nuevo-modificar.table-bordered > tbody > tr > th,
#page-content .tabla-nuevo-modificar.table-bordered > tbody > tr > td,
#page-content .tabla-ver.table-bordered > tbody > tr > th,
#page-content .tabla-ver.table-bordered > tbody > tr > td,
#page-content table#tabla_nuevo_modificar.table-bordered > tbody > tr > th,
#page-content table#tabla_nuevo_modificar.table-bordered > tbody > tr > td {
	border-color: var(--border, #e6eaf0);
	padding: 0.65rem 0.85rem;
	vertical-align: middle;
}

#page-content .tabla-nuevo-modificar th[scope="row"],
#page-content .tabla-ver tbody > tr > th,
#page-content table#tabla_ver tbody > tr > th {
	width: 32%;
	text-align: left;
	font-weight: 600;
	color: var(--text-main, #2d3748);
	background: #fafbfc;
	white-space: normal;
}

#page-content .tabla-ver.table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-bg-type: #fffaf7;
}

#page-content .tabla-nuevo-modificar tbody > tr:hover > *,
#page-content .tabla-ver tbody > tr:hover > * {
	--bs-table-bg-state: #FFF2E9;
}

#page-content .tabla-nuevo-modificar .td-form-field {
	background: var(--surface, #ffffff);
}

#page-content .tabla-nuevo-modificar tr.table-danger > th,
#page-content .tabla-nuevo-modificar tr.table-danger > td,
#page-content .tabla-nuevo-modificar tr.alert-error > th,
#page-content .tabla-nuevo-modificar tr.alert-error > td,
#page-content .tabla-ver tr.alert-error > th,
#page-content .tabla-ver tr.alert-error > td {
	background-color: #f8d7da;
}

#page-content .tabla-nuevo-modificar + p.text-muted {
	margin-top: 0.75rem;
}

/* Confirmaciones (eliminar / cerrar / consumir): menos “alert azul” legacy */
#page-content h4.text-info {
	color: var(--text-muted, #8094ae) !important;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 1rem 0 0.5rem;
}

#page-content #tabla_eliminar {
	width: 100%;
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Listados .tiq-table (tiquetes, folios, gestionar_*, etc.)           */
/* Blanco / gris + zebra suave naranja — guía de marca                */
/* ------------------------------------------------------------------ */
#page-content .tiq-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border, #e6eaf0);
	border-radius: var(--radius-sm, 8px);
	background: var(--surface, #ffffff);
	margin-bottom: 1rem;
}

#page-content table.tiq-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	background: #fff;
	margin-bottom: 0;
}

#page-content table.tiq-table thead th {
	background: #F9F9F9 !important;
	color: var(--text-main, #2d3748) !important;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 12px 10px;
	border-bottom: 1px solid var(--border, #e6eaf0);
	vertical-align: middle;
}

#page-content table.tiq-table thead th a {
	color: var(--text-main, #2d3748) !important;
	text-decoration: none;
}

#page-content table.tiq-table thead th a:hover {
	color: var(--orange, #EB8340) !important;
}

#page-content table.tiq-table tbody td {
	padding: 10px;
	border-bottom: 1px solid var(--border, #e6eaf0);
	vertical-align: middle;
	border-color: var(--border, #e6eaf0);
}

#page-content table.tiq-table tbody tr {
	background: #FFFFFF;
	transition: background 0.15s ease;
}

#page-content table.tiq-table tbody tr:nth-child(even) {
	background: #FFF2E9;
}

#page-content table.tiq-table tbody tr:hover {
	background: var(--orange-lt, #FFF2E9);
}

#page-content table.tiq-table .td-icon {
	width: 36px;
	text-align: center;
}

#page-content table.tiq-table .td-icon a {
	color: var(--text-muted, #8094ae);
	text-decoration: none;
}

#page-content table.tiq-table .td-icon a:hover {
	color: var(--orange, #EB8340);
}

/* Select2 dentro de forms en tabla (Procesos, categorías, etc.) */
#page-content .tabla-nuevo-modificar .select2-container,
#page-content #tabla_nuevo_modificar .select2-container {
	width: 100% !important;
	max-width: 100%;
}

#page-content .tabla-nuevo-modificar .select2-selection--multiple,
#page-content #tabla_nuevo_modificar .select2-selection--multiple {
	min-height: 38px;
	border-color: var(--border, #e6eaf0);
	border-radius: var(--radius-sm, 8px);
}

#page-content .tabla-nuevo-modificar .select2-container--focus .select2-selection--multiple,
#page-content .tabla-nuevo-modificar .select2-container--open .select2-selection--multiple,
#page-content #tabla_nuevo_modificar .select2-container--focus .select2-selection--multiple,
#page-content #tabla_nuevo_modificar .select2-container--open .select2-selection--multiple {
	border-color: rgba(235, 131, 64, 0.65);
	box-shadow: 0 0 0 0.2rem rgba(235, 131, 64, 0.2);
}

/* Paginación compartida */
#page-content #paginacion_osd a {
	border-radius: 18px;
	border-color: var(--border, #e6eaf0);
	background: var(--surface, #ffffff);
	color: var(--text-main, #2d3748);
	font-weight: 600;
}

#page-content #paginacion_osd a:hover {
	background: var(--orange-lt, #FFF2E9);
	color: var(--orange, #EB8340);
	border-color: rgba(235, 131, 64, 0.45);
}

#page-content #paginacion_osd strong {
	color: var(--text-muted, #8094ae);
}

/* ------------------------------------------------------------------ */
/* Neutralizar .campo_texto (gradiente gris legacy)                   */
/* ------------------------------------------------------------------ */
#page-content .campo_texto {
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Dropdown tareas (topbar): tonos suaves, mismo significado          */
/* V=vencido D=días H=horas M=minutos                                 */
/* ------------------------------------------------------------------ */
#topbar #ul_tareas li.tarea_tiempo_V,
#topbar #ul_tareas li.tarea_tiempo_D,
#topbar #ul_tareas li.tarea_tiempo_H,
#topbar #ul_tareas li.tarea_tiempo_M {
	border-radius: 7px;
	margin: 2px 0;
	border-left: 3px solid transparent;
	padding-left: 2px;
}

#topbar #ul_tareas li.tarea_tiempo_V {
	background: #FEE2E2;
	border-left-color: #DC2626;
}
#topbar #ul_tareas li.tarea_tiempo_D {
	background: #ECFDF5;
	border-left-color: #16A34A;
}
#topbar #ul_tareas li.tarea_tiempo_H {
	background: #FEF9C3;
	border-left-color: #CA8A04;
}
#topbar #ul_tareas li.tarea_tiempo_M {
	background: var(--orange-lt, #FFF2E9);
	border-left-color: var(--orange, #EB8340);
}

#topbar #ul_tareas li.tarea_tiempo_V > a,
#topbar #ul_tareas li.tarea_tiempo_D > a,
#topbar #ul_tareas li.tarea_tiempo_H > a,
#topbar #ul_tareas li.tarea_tiempo_M > a {
	color: var(--text-main, #2d3748) !important;
}

#topbar #ul_tareas li.tarea_tiempo_V > a:hover,
#topbar #ul_tareas li.tarea_tiempo_M > a:hover {
	color: var(--orange, #EB8340) !important;
}

/* Notificaciones no leídas: azul claro legacy → tono suave de marca */
#topbar #ul_notificaciones li.notificacion_revisada_false {
	background: var(--orange-lt, #FFF2E9);
	border-radius: 7px;
}
#topbar #ul_notificaciones li.notificacion_revisada_true {
	background: transparent;
}