/* ============================================================================
   bridge.css  -  Capa de compatibilidad Bootstrap 3 -> Metronic 9 (Tailwind)
   ----------------------------------------------------------------------------
   Permite migrar paginas legacy del SGI cambiando SOLO el MasterPageFile a
   metronic9.master: reproduce la rejilla Bootstrap, los portlets, paneles,
   formularios, botones, etiquetas, alertas y tablas con el look Metronic 9
   corporativo (azul SAFA #0065a0). Se carga despues de styles.css (Metronic 9).
   Solo ASCII (evitar corrupcion de tildes del harness).
   Color primario corporativo: #0065a0
   ========================================================================== */

/* ===== REJILLA (Bootstrap 3) ============================================== */
.row { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; }
.row::before, .row::after { content: none; }
[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
    position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px;
}
.col-xs-1{width:8.3333%}.col-xs-2{width:16.6667%}.col-xs-3{width:25%}.col-xs-4{width:33.3333%}
.col-xs-5{width:41.6667%}.col-xs-6{width:50%}.col-xs-7{width:58.3333%}.col-xs-8{width:66.6667%}
.col-xs-9{width:75%}.col-xs-10{width:83.3333%}.col-xs-11{width:91.6667%}.col-xs-12{width:100%}
@media (min-width: 768px) {
    .col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}.col-sm-4{width:33.3333%}
    .col-sm-5{width:41.6667%}.col-sm-6{width:50%}.col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}
    .col-sm-9{width:75%}.col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
}
@media (min-width: 992px) {
    .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}
    .col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}
    .col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
}
@media (min-width: 1200px) {
    .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%}
    .col-lg-5{width:41.6667%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}
    .col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
}

/* ===== PORTLETS =========================================================== */
.portlet { background: #fff; border-radius: .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 1.5rem; }
.portlet.light { padding: 12px 20px 18px; border: 1px solid #eef0f3; }
.portlet > .portlet-title { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #eef0f3; padding: 10px 0; margin-bottom: 12px; min-height: 48px; }
.portlet.box > .portlet-title { padding: 8px 14px; margin-bottom: 0; border-bottom: 0; border-radius: .75rem .75rem 0 0; }
.portlet > .portlet-title > .caption { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #2b3543; padding: 6px 0; }
.portlet > .portlet-title > .caption > i { color: #8a929a; font-size: 15px; }
.portlet > .portlet-title > .caption .caption-subject { font-weight: 700; }
.portlet > .portlet-title > .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.portlet > .portlet-body { padding: 4px 0 0; }
.portlet.box > .portlet-body { background: #fff; padding: 16px 14px; border-radius: 0 0 .75rem .75rem; }
.portlet.box.blue   > .portlet-title { background: #0065a0; }
.portlet.box.red    > .portlet-title { background: #e7505a; }
.portlet.box.green  > .portlet-title { background: #17c653; }
.portlet.box.purple > .portlet-title { background: #8E44AD; }
.portlet.box.yellow > .portlet-title { background: #f59e0b; }
.portlet.box.grey   > .portlet-title { background: #95A5A6; }
.portlet.box.dark   > .portlet-title { background: #2f353b; }
.portlet.box > .portlet-title > .caption,
.portlet.box > .portlet-title > .caption > i { color: #fff; }

/* Colores de texto tipicos de Metronic usados en captions */
.font-red-sunglo, .font-red-sharp, .font-red { color: #e7505a !important; }
.font-blue-sharp, .font-blue-madison, .font-blue { color: #0065a0 !important; }
.font-green-sharp, .font-green-jungle, .font-green { color: #17c653 !important; }
.font-yellow-gold, .font-yellow { color: #f59e0b !important; }
.font-purple { color: #8E44AD !important; }
.text-danger { color: #dc2626 !important; }
.text-success { color: #17c653 !important; }
.bold { font-weight: 700 !important; }
.uppercase { text-transform: uppercase !important; }

/* ===== PANELES ============================================================ */
.panel { background: #fff; border: 1px solid #eef0f3; border-radius: .75rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.panel-heading { padding: 12px 16px; border-bottom: 1px solid #eef0f3; font-weight: 600; border-radius: .75rem .75rem 0 0; }
.panel-body { padding: 16px; }
.panel-title { margin: 0; font-size: 15px; font-weight: 600; }
.panel-primary > .panel-heading { background: #0065a0; color: #fff; border-color: #0065a0; }
.panel-success > .panel-heading { background: #17c653; color: #fff; border-color: #17c653; }
.panel-danger  > .panel-heading { background: #dc2626; color: #fff; border-color: #dc2626; }
.panel-warning > .panel-heading { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.panel-info    > .panel-heading { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.panel-default > .panel-heading { background: #f7f8fa; color: #2b3543; }

/* ===== FORMULARIOS ======================================================== */
.form-group { margin-bottom: 1rem; }
.control-label { display: inline-block; font-weight: 600; font-size: .8125rem; margin-bottom: .35rem; color: #1f2937; }
.form-control {
    display: block; width: 100%; font-size: .8125rem; line-height: 1.5; padding: .5rem .75rem;
    color: #111827; background: #fff; border: 1px solid #e4e6ef; border-radius: .5rem; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { border-color: #0065a0; box-shadow: 0 0 0 3px rgba(0,101,160,.15); }
textarea.form-control { min-height: 90px; }
select.form-control { appearance: auto; }
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.help-block { display: block; margin-top: .35rem; font-size: 85%; color: #8a929a; }
.has-error .form-control { border-color: #dc2626; }
.has-error .control-label { color: #dc2626; }

/* Input group (BS3) */
.input-group { display: flex; width: 100%; }
.input-group > .form-control { border-radius: 0; }
.input-group > .form-control:first-child { border-radius: .5rem 0 0 .5rem; }
.input-group > .form-control:last-child { border-radius: 0 .5rem .5rem 0; }
.input-group-addon { display: flex; align-items: center; padding: .5rem .75rem; background: #f3f4f6; border: 1px solid #e4e6ef; border-right: 0; border-radius: .5rem 0 0 .5rem; color: #55606a; white-space: nowrap; }
.input-group-btn { display: flex; }
.input-group-btn > .btn { border-radius: 0 .5rem .5rem 0; height: 100%; }
.input-group-sm > .form-control, .input-group-sm > .input-group-addon { padding: .3rem .55rem; font-size: .75rem; }

/* ===== BOTONES ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem .9rem; border-radius: .5rem; font-size: .8125rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.4; transition: background .15s, border-color .15s; }
.btn:hover { text-decoration: none; }
.btn-lg { padding: .65rem 1.15rem; font-size: .9rem; }
.btn-sm { padding: .35rem .65rem; font-size: .75rem; }
.btn-xs { padding: .2rem .5rem; font-size: .7rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: #0065a0; color: #fff; } .btn-primary:hover { background: #00527f; color: #fff; }
.btn-success { background: #17c653; color: #fff; } .btn-success:hover { background: #13a745; color: #fff; }
.btn-warning { background: #f59e0b; color: #fff; } .btn-warning:hover { background: #d98806; color: #fff; }
.btn-danger  { background: #dc2626; color: #fff; } .btn-danger:hover  { background: #b91c1c; color: #fff; }
.btn-info    { background: #0ea5e9; color: #fff; } .btn-info:hover    { background: #0284c7; color: #fff; }
.btn-default { background: #fff; color: #374151; border-color: #e4e6ef; }
.btn-default:hover { background: #f3f4f6; color: #111827; }
.btn-link { background: transparent; color: #0065a0; border-color: transparent; }

/* ===== ETIQUETAS / BADGES (BS3) =========================================== */
.label { display: inline-block; padding: .2em .5em; font-size: 75%; font-weight: 600; border-radius: .375rem; color: #fff; line-height: 1.4; }
.label-sm { font-size: 70%; }
.label-warning { background: #f59e0b; } .label-success { background: #17c653; }
.label-info { background: #0ea5e9; } .label-danger { background: #dc2626; }
.label-primary { background: #0065a0; } .label-default { background: #9ca3af; }
.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 11px; font-weight: 700; color: #fff; background: #9ca3af; border-radius: 10px; }
.badge-danger { background: #dc2626; } .badge-success { background: #17c653; } .badge-info { background: #0ea5e9; }

/* ===== ALERTAS ============================================================ */
.alert { padding: .85rem 1rem; border-radius: .5rem; border: 1px solid transparent; margin-bottom: 1rem; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-success { background: #ecfdf3; border-color: #a6f4c5; color: #067647; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #b42318; }

/* ===== TABLAS ============================================================= */
.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; background: #fff; }
.table > thead > tr > th, .table thead th { text-align: left; font-weight: 600; color: #4b5563; border-bottom: 2px solid #eef0f3; padding: .6rem .6rem; }
.table > tbody > tr > td, .table tbody td { padding: .55rem .6rem; border-top: 1px solid #f0f2f5; vertical-align: middle; }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid #eef0f3; }
.table-striped > tbody > tr:nth-child(odd) > td { background: #fafbfc; }
.table-hover > tbody > tr:hover > td { background: #f2f7fb; }
.table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: .35rem .5rem; }
.table-responsive { width: 100%; overflow-x: auto; }
.thead-metronic > tr > th { background: #f7f8fa; color: #55606a; font-weight: 600; }

/* ===== PESTANAS / PILLS (Bootstrap 3) ===================================== */
.nav { list-style: none; margin: 0; padding: 0; }
.nav-tabs { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #e4e6ef; gap: 2px; }
.nav-tabs > li > a { display: inline-flex; align-items: center; padding: .6rem 1rem; color: #55606a; border: 1px solid transparent; border-bottom: 0; border-radius: .5rem .5rem 0 0; text-decoration: none; font-weight: 600; font-size: .85rem; }
.nav-tabs > li.active > a, .nav-tabs > li > a.active { color: #0065a0; background: #fff; border-color: #e4e6ef; border-bottom: 2px solid #0065a0; }
.nav-tabs > li > a:hover { color: #0065a0; }
.tab-content { padding-top: 1rem; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.nav-pills { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 4px; }
.nav-pills > li > a { display: inline-block; padding: .4rem .8rem; border-radius: .5rem; color: #55606a; text-decoration: none; }
.nav-pills > li.active > a { background: #0065a0; color: #fff; }

/* ModalPopupExtender (AjaxControlToolkit): fondo oscuro */
.modalBackground { background: #000; opacity: .5; }

/* ===== UTILIDADES BS3 sueltas ============================================= */
.pull-left { float: left !important; } .pull-right { float: right !important; }
.text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; }
.text-muted { color: #8a929a !important; }
.well { background: #f7f8fa; border: 1px solid #eef0f3; border-radius: .5rem; padding: 16px; margin-bottom: 1rem; }
.clearfix::after { content: ""; display: table; clear: both; }