/*
 * Estilos globales compartidos por el panel y el sitio público.
 */

/* ── Color primario global: negro. El panel de dueño lo sobreescribe dinámicamente con la paleta del negocio. ── */
:root {
  --color-blue-50:  #f5f5f5;
  --color-blue-100: #ebebeb;
  --color-blue-200: #d6d6d6;
  --color-blue-300: #adadad;
  --color-blue-400: #737373;
  --color-blue-500: #404040;
  --color-blue-600: #111111;
  --color-blue-700: #000000;
  --color-blue-800: #000000;
  --color-blue-900: #000000;
}

/*
 * Cursor de mano en todo lo interactivo.
 *
 * Tailwind v4 ya no aplica `cursor: pointer` a los botones por defecto, así que
 * lo restituimos para todos los elementos clicables. Las utilidades explícitas
 * (`.cursor-pointer` / `.cursor-default`) siguen teniendo prioridad por su mayor
 * especificidad, de modo que esto no pisa decisiones puntuales.
 */
button,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"],
a[href],
label[for],
select,
summary,
[data-modal-open],
[data-modal-close],
[onclick] {
    cursor: pointer;
}

/* DataTable action button color variants (static rules — Tailwind CDN does not scan JS-injected HTML). */
.dt-btn-default { color: #4b5563; border-color: #e5e7eb; }
.dt-btn-default:hover { background-color: #f9fafb; }
.dt-btn-danger  { color: #dc2626; border-color: #fecaca; }
.dt-btn-danger:hover  { background-color: #fef2f2; }
.dt-btn-success { color: #16a34a; border-color: #bbf7d0; }
.dt-btn-success:hover { background-color: #f0fdf4; }
.dt-btn-primary { color: var(--color-blue-600, #111111); border-color: var(--color-blue-200, #d6d6d6); background-color: var(--color-blue-50, #f5f5f5); }
.dt-btn-primary:hover { background-color: var(--color-blue-100, #ebebeb); }

/* DataTable: tarjetas responsivas en móvil */
@media (max-width: 640px) {
    .dt-table { min-width: 0 !important; }
    .dt-table thead { display: none; }

    .dt-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin: 8px 0;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    .dt-table tbody tr:hover { background: #f9fafb; }

    .dt-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 14px;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        font-size: 13px;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-table tbody td:last-child { border-bottom: none; }

    .dt-table tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex: 0 0 auto;
        max-width: 45%;
    }

    .dt-table tbody td.dt-actions {
        justify-content: center;
        padding: 10px 14px;
    }
    .dt-table tbody td.dt-actions::before { display: none; }
    .dt-table tbody td.dt-actions > div { justify-content: center !important; }

    /* Estado vacío: sin card extra */
    .dt-table tbody td.dt-empty {
        display: table-cell;
        width: auto;
        border: none;
    }
    .dt-table tbody tr:has(td.dt-empty) {
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }
}

/* Estados deshabilitados: cursor de "no permitido". */
button:disabled,
button[disabled],
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled,
select:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}