/* =========================================================
   adm-ui.css  -  Estilos reutilizables para modulos admin
   Paleta: #900 (primario) | #fff (texto claro) | #f4f4f4 (fondo)
   Tipografia base: Roboto, sans-serif  12px
   ========================================================= */

/* ---- Base tipografica para todos los componentes ------- */
.filter-bar,
.tbl-header-bar,
.btn-filtrar,
.btn-add,
.opt-btn,
.btn-deshabilitar,
.dt-adm,
.dt-container {
    font-family: Roboto, sans-serif;
    font-size: 12px;
}

/* ---- Barra de filtros ---------------------------------- */
/* El layout lo maneja Bootstrap (row/col). Aqui solo branding. */
.filter-bar {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.filter-bar .form-label {
    color: #555;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Focus con color de marca */
.filter-bar .form-control:focus {
    border-color: #900;
    box-shadow: 0 0 0 3px rgba(153,0,0,0.12);
}
.filter-bar .form-check-input:checked {
    background-color: #900;
    border-color: #900;
}
.filter-bar .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(153,0,0,0.12);
}

/* ---- Autocomplete (jQuery UI) -------------------------- */
.ui-autocomplete {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
}
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 7px 12px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover {
    background: #900;
    color: #fff;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* ---- Botones de accion --------------------------------- */
.btn-filtrar {
    background: #900;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-filtrar:hover { background: #700; }

.btn-limpiar {
    background: #fff;
    color: #900;
    border: 1px solid #900;
    padding: 6px 14px;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-limpiar:hover { background: #900; color: #fff; }

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #900;
    color: #fff !important;
    border: none;
    padding: 7px 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-add:hover,
.btn-add:visited,
.btn-add:active { background: #700; color: #fff !important; text-decoration: none; }
.btn-add i { font-size: 13px; }

/* ---- Encabezado de seccion de tabla ------------------- */
/* d-flex / justify-content-between vienen de Bootstrap en el HTML */
.tbl-header-bar {
    margin: 16px 0 10px;
}
.tbl-header-bar h2 {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    color: #900;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Tabla base ---------------------------------------- */
.dt-adm {
    width: 100% !important;
    border-collapse: collapse;
}
.dt-adm thead th {
    background: #900;
    color: #fff;
    padding: 9px 12px;
    font-family: inherit;
    font-size: inherit;
    white-space: nowrap;
    border: none;
    text-align: center;
    position: relative;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.dt-adm tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #f0f0f0;
    vertical-align: middle;
    font-family: inherit;
    font-size: inherit;
    color: #333;
}
.dt-adm tbody td:first-child    { border-left: 1px solid #f0f0f0; }
.dt-adm tbody tr:first-child td { border-top: 1px solid #ddd; }
.dt-adm tbody tr:nth-child(even) { background: #f4f4f4; }
.dt-adm tbody tr:hover           { background: #fde8e8; }
.dt-adm tbody td.td-center  { text-align: center; }
.dt-adm tbody td.td-right   { text-align: right; }
.dt-adm tbody td.td-nowrap  { white-space: nowrap; }
.dt-adm tbody td.td-empty {
    text-align: center;
    padding: 24px;
    color: #aaa;
    font-style: italic;
}

/* ---- Botones de opciones en filas (Font Awesome) ------- */
.opt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.opt-btn i { font-size: 13px; }

.opt-btn.opt-edit { color: #555; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-edit:hover { background: #900; color: #fff; border-color: #900; }

.opt-btn.opt-del   { color: #900; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-del:hover  { background: #900; color: #fff; border-color: #900; }

.opt-btn.opt-close   { color: #900;    background: #f4f4f4; border: 1px solid #ddd; cursor: pointer; width: auto; padding: 0 10px; gap: 5px; }
.opt-btn.opt-close:hover { background: #900;    color: #fff; border-color: #900; }

.opt-btn.opt-mail    { color: #2980b9; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-mail:hover  { background: #2980b9; color: #fff; border-color: #2980b9; }

.opt-btn.opt-copy    { color: #555;    background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-copy:hover  { background: #555;    color: #fff; border-color: #555; }

.opt-btn.opt-pdf     { color: #c0392b; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-pdf:hover   { background: #c0392b; color: #fff; border-color: #c0392b; }

.opt-btn.opt-folder  { color: #e67e22; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-folder:hover{ background: #e67e22; color: #fff; border-color: #e67e22; }

.opt-btn.opt-excel   { color: #27ae60; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-excel:hover { background: #27ae60; color: #fff; border-color: #27ae60; }

.opt-btn.opt-approve { color: #27ae60; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-approve:hover{ background: #27ae60; color: #fff; border-color: #27ae60; }

.opt-btn.opt-eye     { color: #2980b9; background: #f4f4f4; border: 1px solid #ddd; cursor: default; }

.opt-btn.opt-resume  { color: #7f8c8d; background: #f4f4f4; border: 1px solid #ddd; }
.opt-btn.opt-resume:hover{ background: #7f8c8d; color: #fff; border-color: #7f8c8d; }

/* ---- Badge copia ---------------------------------------- */
.badge-copia {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    background: #27ae60;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1.4;
}

/* ---- Botones Excel / descarga (cotizaciones) ----------- */
.btn-excel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 3px;
    padding: 6px 14px;
    color: #fff !important;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    text-decoration: none;
    margin-left: 6px;
    transition: opacity 0.15s;
}
.btn-excel:first-of-type { background: #27ae60; }   /* Descargar Excel */
.btn-excel:last-of-type  { background: #2980b9; }   /* Como Vamos      */
.btn-excel:hover { opacity: 0.85; color: #fff !important; }

/* ---- Iconos de accion en tabla cotizaciones ------------ */
a.opt-btn, span.opt-btn { text-decoration: none; }
a .fas, a .far, a .fab { pointer-events: none; }

/* =========================================================
   DataTables 1.10.x — overrides
   Selectores correctos para la version cargada en init.php
   ========================================================= */

.dataTables_wrapper {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    color: #333;
}

/* Toolbar: length (izq) + filter (der) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
    padding: 4px 0;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Input de busqueda */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: inherit;
    color: #333;
    outline: none;
    min-width: 180px;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-left: 6px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #900;
    box-shadow: 0 0 0 3px rgba(153, 0, 0, 0.12);
}

/* Select de cantidad */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 6px;
    font-family: inherit;
    font-size: inherit;
    color: #333;
    background: #fff;
    cursor: pointer;
    margin: 0 4px;
}
.dataTables_wrapper .dataTables_length select:focus {
    border-color: #900;
    outline: none;
}

/* Info: "Mostrando X a Y de Z registros" */
.dataTables_wrapper .dataTables_info {
    font-family: inherit;
    font-size: 11px;
    color: #888;
    padding-top: 8px;
}

/* Separador inferior: info + paginacion */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px;
    border-top: 2px solid #f4f4f4;
    padding-top: 8px;
}

/* Paginacion */
.dataTables_wrapper .dataTables_paginate {
    text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #900 !important;
    text-decoration: none !important;
    line-height: 1.4;
    margin: 0 1px;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f4f4f4 !important;
    border-color: #900 !important;
    color: #700 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #900 !important;
    border-color: #700 !important;
    color: #fff !important;
    font-weight: bold;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f4f4f4 !important;
    border-color: #e8e8e8 !important;
    color: #ccc !important;
    cursor: default;
}

/* Cabeceras ordenables (1.10.x usa .sorting / .sorting_asc / .sorting_desc) */
table.dt-adm thead th.sorting,
table.dt-adm thead th.sorting_asc,
table.dt-adm thead th.sorting_desc {
    cursor: pointer;
    padding-right: 24px;
}
table.dt-adm thead th.sorting:hover,
table.dt-adm thead th.sorting_asc:hover,
table.dt-adm thead th.sorting_desc:hover {
    background: #700;
}

/* Reemplazar imagenes de orden nativas con caracteres Unicode */
table.dt-adm thead th.sorting::after {
    content: "\2195";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.45;
}
table.dt-adm thead th.sorting_asc::after {
    content: "\2191";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 1;
}
table.dt-adm thead th.sorting_desc::after {
    content: "\2193";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 1;
}
/* Ocultar imagen de fondo nativa de DataTables 1.10.x */
table.dt-adm thead th.sorting,
table.dt-adm thead th.sorting_asc,
table.dt-adm thead th.sorting_desc {
    background-image: none !important;
}

/* ---- Utilidades de módulo generales -------------------- */
.adm-title {
    font-size: 16px;
    font-weight: bold;
    color: #900;
    margin: 0;
}

.adm-count {
    font-size: 12px;
    color: #555;
    margin: 6px 0 8px;
}

.filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-toolbar .filter-left  { display: flex; align-items: center; gap: 8px; }
.filter-toolbar .filter-right { display: flex; align-items: center; gap: 4px; }

.btn-adm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-family: Roboto, sans-serif;
    background: #900;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-adm:hover { background: #700; color: #fff; }

/* ---- DataTables Buttons: Exportar Excel ---- */
.btn-export-excel,
.dt-buttons .btn-export-excel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-family: Roboto, sans-serif;
    background: #1a7b45;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}
.btn-export-excel:hover,
.dt-buttons .btn-export-excel:hover { background: #155e35; color: #fff !important; }