/* Botones, campos y tablas comunes: sistema de diseño SanCarlosComercial.
   Reemplaza los estilos antiguos (verde #166534, radios de 10/12 px, botones sin fuente). */

/* Botones */
.button {
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0a0a0a;
    color: #fafafa;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.button:hover { background: #171717; }
.button.small { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.button.ghost { border: 0; background: #f5f5f5; color: #0a0a0a; }
.button.ghost:hover { background: #e5e5e5; }
.button.full { width: 100%; }
.button svg,
.icon-btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:focus-visible,
.icon-btn:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }

.actions { flex-wrap: wrap; }

/* Botones de solo icono (acciones de fila) */
.icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    display: inline-grid;
    place-items: center;
    background: #ffffff;
    color: #171717;
    text-decoration: none;
    cursor: pointer;
}

.icon-btn:hover { background: #f5f5f5; }
.icon-btn.is-danger { color: #e7000b; }
.row-actions { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }
.row-actions form { margin: 0; display: inline-flex; }
td.right { white-space: nowrap; }

.dangerlink { color: #e7000b; font-weight: 500; }

/* Textos y superficies */
.eyebrow { color: #737373; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.card { padding: 20px; border-radius: 24px; border-color: #e5e5e5; box-shadow: 0 0 0 1px rgba(23, 23, 23, .05), 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); }
.card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.56; letter-spacing: -.01em; }
.pagehead h1 { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.alert { border-color: #e5e5e5; border-radius: 18px; background: #ffffff; color: #0a0a0a; box-shadow: 0 0 0 1px rgba(23, 23, 23, .05); }
.pill { background: #f5f5f5; color: #171717; }

/* Campos (prioridad baja para que las pantallas con estilos propios, como Configuración, los sobrescriban) */
:where(main.container) label { margin: 14px 0 0; color: #0a0a0a; font-size: 14px; font-weight: 500; }
:where(main.container) input,
:where(main.container) select,
:where(main.container) textarea {
    min-height: 44px;
    margin-top: 6px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #f5f5f5;
    color: #0a0a0a;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
}

:where(main.container) textarea { line-height: 1.43; }
:where(main.container) input:focus,
:where(main.container) select:focus,
:where(main.container) textarea:focus { outline: 0; border-color: #e5e5e5; background: #ffffff; box-shadow: inset 0 0 0 1px #e5e5e5; }

:where(main.container) input[type="checkbox"],
:where(main.container) input[type="radio"] { width: 18px; min-height: 0; height: 18px; margin: 0; accent-color: #0a0a0a; }

:where(main.container) input[type="file"] {
    padding: 6px;
    border: 1px dashed #e5e5e5;
    background: #fafafa;
    color: #737373;
    font-size: 13px;
    cursor: pointer;
}

:where(main.container) input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: 18px;
    background: #0a0a0a;
    color: #fafafa;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.check { margin-top: 14px; font-weight: 500; }

/* Tablas */
th {
    color: #737373;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

td { font-size: 14px; }

form > .button { margin-top: 18px; }

/* Logo de la plataforma */
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 46px; width: auto; }

/* Aviso: tienda sin publicar por falta de verificación */
.verify-banner {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    color: #171717;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 0 0 1px rgba(23, 23, 23, .05), 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

.verify-banner b { color: #0a0a0a; }
.verify-banner > div { flex: 1 1 260px; }

/* Mi plan (panel): mismos radios y bordes que .card. */
.plan-status, .plan-how { margin-bottom: 20px; }
.plan-cards { display: grid; gap: 16px; margin-bottom: 20px; }
.plan-card-panel { display: grid; gap: 8px; align-content: start; }
.plan-card-panel.is-current { border-color: #171717; box-shadow: 0 0 0 1px #171717; }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-head h2 { margin: 0; }
.plan-price { margin: 4px 0; }
.plan-price b { font-size: 30px; font-weight: 600; letter-spacing: -.75px; }
.plan-price span { color: #737373; font-size: 14px; }
.plan-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: #171717; }
.plan-discounts { margin: 8px 0 0; font-size: 13px; }
@media (min-width: 768px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }