[x-cloak] {
    display: none !important;
}

[data-theme="visalia"] {
    color-scheme: light;
    --color-base-100: #f8fafc;
    --color-base-200: #e0f4fa;
    --color-base-300: #c5e9f6;
    --color-base-content: #0f172a;
    --color-primary: #009edc;
    --color-primary-content: #ffffff;
    --color-secondary: #7fd3f0;
    --color-secondary-content: #0f172a;
    --color-accent: #00b67a;
    --color-accent-content: #052e16;
    --color-neutral: #0f172a;
    --color-neutral-content: #f8fafc;
    --color-info: #0ea5e9;
    --color-info-content: #ffffff;
    --color-success: #22c55e;
    --color-success-content: #052e16;
    --color-warning: #fbbf24;
    --color-warning-content: #422006;
    --color-error: #dc2626;
    --color-error-content: #ffffff;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.21875rem;
    --size-field: 0.21875rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

/* Subestado "Pendiente" de Receipt: naranja exclusivo, no --color-warning
   (compartido con 15+ usos no relacionados en toda la aplicación). */
[data-theme="visalia"] .badge-receipt-pending {
    background-color: #f97316;
    color: #431407;
    border-color: #f97316;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Estilo base de campos de formulario (texto/fecha/número/select/textarea):
   una sola vez, global, sin depender de que cada formulario le ponga clases
   de daisyUI a mano a cada widget. */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
select,
textarea {
    /* Solo decoración (borde, tipografía, color) — el ancho y el
       espaciado externo (margin) son responsabilidad de las clases de
       layout de cada sitio (w-full, w-1/2, join-item...), no de esta regla. */
    border: var(--border) solid var(--color-base-300);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    height: 2.1875rem;
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    /* Sin esto, un input dentro de un .join (flex) nunca encoge por debajo
       del ancho mínimo de su contenido nativo (ej. "dd/mm/aaaa" + icono de
       calendario) y se sale del contenedor aunque tenga w-1/2. */
    min-width: 0;
}

/* El radio de esquina lo deja en manos de daisyUI cuando el campo es parte
   de un .join (join-item redondea solo las esquinas externas del grupo);
   fuera de un join, aplica el radio estándar del proyecto. */
input[type="text"]:not(.join-item),
input[type="date"]:not(.join-item),
input[type="number"]:not(.join-item),
input[type="email"]:not(.join-item),
select:not(.join-item),
textarea:not(.join-item) {
    border-radius: var(--radius-field);
}

/* Ancho por defecto con especificidad 0 (:where): cualquier clase de layout
   ya existente (w-1/2, join-item...) gana siempre sobre esto; solo aplica
   donde no hay ninguna clase de ancho puesta. */
:where(input[type="text"], input[type="date"], input[type="number"], input[type="email"], select, textarea) {
    width: 100%;
}

textarea {
    height: auto;
    padding: 0.5rem 0.75rem;
}

select {
    padding-right: 1.75rem;
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
}

/* Envoltorio genérico del contenido de <c-modal> (ver cotton/modal.html):
   display:contents lo saca del árbol de layout, así que cualquier flex/grid
   que ya tuviera el modal-box sigue funcionando igual que si no existiera. */
.modal-content {
    display: contents;
}

[data-theme="visalia-dark"] {
    color-scheme: dark;
    --color-base-100: #1e293b;
    --color-base-200: #273449;
    --color-base-300: #334155;
    --color-base-content: #f8fafc;
    --color-primary: #1ab3eb;
    --color-primary-content: #ffffff;
    --color-secondary: #3b536e;
    --color-secondary-content: #f8fafc;
    --color-accent: #19c38a;
    --color-accent-content: #052e16;
    --color-neutral: #0f172a;
    --color-neutral-content: #f8fafc;
    --color-info: #38bdf8;
    --color-info-content: #082f49;
    --color-success: #4ade80;
    --color-success-content: #052e16;
    --color-warning: #fbbf24;
    --color-warning-content: #422006;
    --color-error: #f87171;
    --color-error-content: #450a0a;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.21875rem;
    --size-field: 0.21875rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

[data-theme="visalia-dark"] .badge-receipt-pending {
    background-color: #fb923c;
    color: #431407;
    border-color: #fb923c;
}