/* ─────────────────────────────────────────────────────────────
   Estilos para la página Plantillas (tabla + header)
   ───────────────────────────────────────────────────────────── */

/* Anchos de columna de la tabla principal */
.plantillas-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.85rem;
}

.plantillas-table .plantillas-col-id { width: 5%; }
.plantillas-table .plantillas-col-nombre { width: 24%; max-width: 280px; }
.plantillas-table .plantillas-col-categoria { width: 10%; }
.plantillas-table .plantillas-col-idioma { width: 5%; }
.plantillas-table .plantillas-col-estado { width: 8%; }
.plantillas-table .plantillas-col-descripcion { width: 30%; }
.plantillas-table .plantillas-col-fecha { width: 10%; }
.plantillas-table .plantillas-col-acciones { width: 8%; min-width: 130px; }

/* ─── Barra de acciones: todos los elementos con altura 40px ─── */

/* Botones del header */
.plantillas-action-btn {
    height: 40px;
    min-width: 40px;
    padding: 0 16px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

/* Botón de refrescar (icon-only cuadrado) */
.plantillas-action-btn[title="Refrescar lista"] {
    width: 40px;
    min-width: 40px;
    padding: 0;
}

/* Botón Sincronizar - azul sólido con hover */
.plantillas-action-btn.btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.plantillas-action-btn.btn-primary:hover {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.35);
}

/* Botón Nueva Plantilla - verde con hover */
.plantillas-action-btn.btn-success {
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
.plantillas-action-btn.btn-success:hover {
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.35);
}

/* Toggle view: grupo de dos botones (cards/table) */
.plantillas-view-toggle {
    display: inline-flex;
    height: 40px;
    border-radius: 0.375rem;
    overflow: hidden;
}

.plantillas-view-toggle .btn {
    height: 40px;
    width: 40px;
    min-width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    border: none;
    border-radius: 0;
    background-color: #fff;
    color: #6B7280;
    transition: all 0.15s ease;
}

.plantillas-view-toggle .btn:first-child {
    border-right: 1px solid #dee2e6;
}

.plantillas-view-toggle .btn:hover {
    background-color: #F3F4F6;
    color: #2563EB;
}

.plantillas-view-toggle .btn.active {
    background-color: #2563EB;
    color: #fff;
    border-color: #2563EB;
    z-index: 1;
}

.plantillas-view-toggle .btn.active:hover {
    background-color: #1D4ED8;
}

/* SearchBox: altura 40px para que coincida con los botones */
.plantillas-header-search .input-group {
    height: 40px !important;
    width: 220px;
}

.plantillas-header-search .input-group .input-group-text {
    height: 40px !important;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding: 0 10px;
    border: 1px solid #dee2e6;
    border-right: none;
    background-color: #fff;
}

.plantillas-header-search .input-group .form-control {
    height: 40px !important;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    padding: 0 12px;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    border-left: none;
}

.plantillas-header-search .input-group .form-control:focus {
    box-shadow: none;
    border-color: #2563EB;
}
.plantillas-header-search .input-group:focus-within .input-group-text {
    border-color: #2563EB;
}
.plantillas-header-search .input-group:focus-within .form-control {
    border-color: #2563EB;
}

/* Badge morado personalizado (MARKETING) */
.bg-plantillas-marketing {
    background-color: #8B5CF6 !important;
    color: #fff !important;
}

/* Botones de acción en filas de la tabla: tamaño uniforme 30x30 */
.plantillas-table .btn-link {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    font-size: 0.85rem;
}

.plantillas-table .btn-link:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.plantillas-table td:first-child {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
}