/* RMCPanel — ajustes adicionales sobre Tailwind */

html { scroll-behavior: smooth; }

input, select, textarea {
    transition: border-color .15s, box-shadow .15s;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
input[type="search"], input[type="date"], input[type="datetime-local"], select, textarea {
    /* border-width/style explícitos: el reset (Preflight) de Tailwind pone border-width:0,
       así que fijar solo border-color no dibuja ningún borde. */
    border-width: 1px;
    border-style: solid;
    border-color: #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    background-color: #fff;
}

/*
 * Select y textarea necesitan MÁS especificidad que la regla de arriba: el reset (Preflight)
 * de Tailwind incluye "button, input, select, textarea { padding: 0 }". Nuestra regla los
 * empareja con el selector simple (select/textarea), que EMPATA en especificidad con Preflight
 * y, como el CDN se inyecta después, pierde → padding 0 → se ven aplastados. Los inputs de
 * texto no sufren esto porque los seleccionamos por atributo (input[type="..."]), que gana.
 * Con "body select"/"body textarea" subimos la especificidad y recuperamos el padding correcto.
 */
body select,
body textarea {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    width: 100%;
    background-color: #fff;
    color: #0f172a;
}

/* El select pierde su flecha nativa al fijar appearance:none, así que la dibujamos nosotros
   (SVG embebido) y reservamos espacio a la derecha para que no pise el texto. */
body select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.1rem 1.1rem;
    cursor: pointer;
}

body textarea {
    min-height: 5rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

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

table.data-table thead th {
    text-align: left;
    font-weight: 600;
    color: #475569;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

table.data-table tbody td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

table.data-table tbody tr:hover {
    background: #f8fafc;
}

.badge { display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-muted   { background: #e2e8f0; color: #475569; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap: 6px; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; transition: background .15s, color .15s; }
.btn-primary { background: #0f172a; color: white; }
.btn-primary:hover { background: #1e293b; }
.btn-success { background: #10b981; color: white; }
.btn-success:hover { background: #059669; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: white; color: #0f172a; border: 1px solid #cbd5e1; }
.btn-ghost:hover { background: #f8fafc; }

.label { display:block; font-size: 0.875rem; font-weight: 500; color: #334155; margin-bottom: 0.25rem; }
.help { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
.error-text { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; }

@media (max-width: 640px) {
    table.data-table { font-size: 0.8125rem; }
    table.data-table thead th, table.data-table tbody td { padding: 0.5rem 0.625rem; }
}