/* Sistema visual del panel — un único lugar para botones, inputs, cards y textos,
   así Productos, Pedidos, Categorías y Contenido se ven todos parte de la misma herramienta. */

.a-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
}

.a-page-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.a-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
}

.a-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

.a-input,
.a-select,
.a-textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.15s ease;
}

.a-input:focus,
.a-select:focus,
.a-textarea:focus {
    outline: none;
    border-color: #B5502E;
    box-shadow: 0 0 0 3px rgba(181, 80, 46, 0.12);
}

.a-help {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.375rem;
}

.a-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.a-btn-primario {
    background: #B5502E;
    color: #fff;
}

.a-btn-primario:hover {
    background: #9c4326;
}

.a-btn-secundario {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.a-btn-secundario:hover {
    background: #f9fafb;
}

.a-btn-texto {
    color: #B5502E;
    font-size: 0.875rem;
    font-weight: 500;
}

.a-btn-texto:hover {
    text-decoration: underline;
}

.a-btn-peligro-texto {
    color: #9ca3af;
    font-size: 0.875rem;
}

.a-btn-peligro-texto:hover {
    color: #dc2626;
    text-decoration: underline;
}

.a-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-weight: 500;
}

.a-badge-activo { background: rgba(75, 88, 66, 0.1); color: #4B5842; }
.a-badge-inactivo { background: #f3f4f6; color: #6b7280; }
.a-badge-acento { background: rgba(181, 80, 46, 0.1); color: #B5502E; }
.a-badge-alerta { background: #fffbeb; color: #b45309; }
.a-badge-info { background: #eff6ff; color: #1d4ed8; }
.a-badge-error { background: #fef2f2; color: #b91c1c; }

/* Sin color propio: el color/fondo lo pone la clase .a-badge-* combinada con esta,
   así el select de estado usa la misma paleta que el resto de los badges del panel. */
.a-select-compacto {
    border: none;
    border-radius: 9999px;
    padding: 0.3rem 1.75rem 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
}

.a-select-compacto:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(181, 80, 46, 0.15);
}

.a-alert {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.a-alert-exito { background: rgba(75, 88, 66, 0.1); color: #4B5842; }
.a-alert-error { background: #fef2f2; color: #b91c1c; }
.a-alert-alerta { background: #fffbeb; color: #b45309; }

.a-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.a-kpi-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.a-kpi-valor {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
}

.a-table {
    width: 100%;
    font-size: 0.875rem;
}

.a-table thead tr {
    text-align: left;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.a-table th,
.a-table td {
    padding: 0.75rem 1.25rem;
}

.a-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #B5502E;
    outline-offset: 2px;
}

/* Controles que genera DataTables (buscador, "mostrar N", info y paginación).
   Se estilizan acá en vez de depender del CSS del CDN de DataTables, que a veces
   no responde y deja esos controles sin ningún estilo. */

.dataTables_wrapper {
    padding: 0.25rem 1.25rem 1rem;
}

.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.dataTables_wrapper .dataTables_length { float: left; }
.dataTables_wrapper .dataTables_filter { float: right; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    margin-left: 0.5rem;
    background: #fff;
    color: #1f2937;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: #B5502E;
    box-shadow: 0 0 0 3px rgba(181, 80, 46, 0.12);
}

.dataTables_wrapper .dataTables_info {
    padding: 1rem 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
    float: left;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem 0 0;
    float: right;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #374151;
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #B5502E;
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #9c4326;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent;
    border-color: transparent;
}

table.dataTable thead th,
table.dataTable thead td {
    position: relative;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    padding-right: 1.25rem !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: 0.5rem;
    font-size: 0.7rem;
    color: #d1d5db;
}

table.dataTable thead th.sorting::after { content: "\2195"; }
table.dataTable thead th.sorting_asc::after { content: "\2191"; color: #B5502E; }
table.dataTable thead th.sorting_desc::after { content: "\2193"; color: #B5502E; }