@import url(shoelace/themes/light.css);

/*
 * Tema "Naturaleza Fresca" para Shoelace
 * Color Principal: Verde (#4CAF50 - un verde medio vibrante)
 * Colores Neutros: Grises suaves a medios para un contraste limpio
 * Colores de Éxito/Advertencia/Peligro/Info: Adaptados para complementar el verde
 */

:root {
    /* --- Colores Primarios (Basados en el verde) --- */
    --sl-color-primary-50: #e8f5e9; /* Muy claro (similar al menta) */
    --sl-color-primary-100: #c8e6c9; /* Más claro */
    --sl-color-primary-200: #a5d6a7; /* Claro */
    --sl-color-primary-300: #81c784;
    --sl-color-primary-400: #66bb6a;
    --sl-color-primary-500: #4caf50; /* ¡Tu verde principal! */
    --sl-color-primary-600: #43a047;
    --sl-color-primary-700: #388e3c;
    --sl-color-primary-800: #2e7d32;
    --sl-color-primary-900: #1b5e20;
    --sl-color-primary-950: #124d17; /* Muy oscuro */

    /* --- Colores Neutros (Para texto, fondos y bordes) --- */
    --sl-color-neutral-50: #f8f8f8; /* Blanco casi puro para fondos */
    --sl-color-neutral-100: #f0f0f0; /* Gris muy claro para fondos sutiles */
    --sl-color-neutral-200: #e0e0e0; /* Gris claro para bordes suaves */
    --sl-color-neutral-300: #c9c9c9; /* Gris medio claro */
    --sl-color-neutral-400: #a6a6a6; /* Gris medio para texto secundario */
    --sl-color-neutral-500: #7a7a7a; /* Gris medio para texto de párrafo */
    --sl-color-neutral-600: #575757; /* Gris oscuro para texto importante */
    --sl-color-neutral-700: #3a3a3a; /* Gris muy oscuro para encabezados */
    --sl-color-neutral-800: #282828; /* Casi negro */
    --sl-color-neutral-900: #1a1a1a; /* El más oscuro, para texto principal/íconos */
    --sl-color-neutral-950: #0d0d0d; /* Negro profundo */

    /* --- Colores de Estado (Éxito, Advertencia, Peligro, Información) --- */
    --sl-color-success-500: #388e3c; /* Un verde más profundo y oscuro para el éxito */
    --sl-color-warning-500: #ffc107; /* Amarillo vibrante (estándar) */
    --sl-color-danger-500: #ef5350; /* Rojo suave para el peligro */
    --sl-color-info-500: #2196f3; /* Azul vibrante (estándar) */

    /* --- Otros Colores Básicos --- */
    --sl-color-white: #ffffff;
    --sl-color-black: #000000;

    /* --- Sombras (para profundidad y relieve) --- */
    --sl-shadow-x-small: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sl-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04);
    --sl-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    --sl-shadow-large: 0 4px 18px rgba(0, 0, 0, 0.16),
        0 1px 3px rgba(0, 0, 0, 0.08);
    --sl-shadow-x-large: 0 8px 30px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.08);

    /* --- Bordes y Radios (opcional, para una estética más suave) --- */
    --sl-border-radius-small: 4px;
    --sl-border-radius-medium: 8px; /* Un poco más suave que el valor por defecto */
    --sl-border-radius-large: 12px;
    --sl-border-radius-x-large: 16px;
    --sl-border-radius-pill: 9999px; /* Para píldoras y botones muy redondeados */
    --sl-border-radius-circle: 50%;

    --sl-input-focus-ring-color: hsla(133, 48%, 54%, 0.4);
}

/* Opcional: Unas pocas reglas adicionales para el body para un mejor efecto visual */
body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente legible */
    background-color: var(--sl-color-neutral-50); /* Fondo muy claro */
    color: var(--sl-color-neutral-900); /* Color de texto principal */
    margin: 0;
    padding: 20px;
}

/* Opcional: Estilo para enlaces normales para que coincidan con el tema */
a {
    color: var(--sl-color-primary-700); /* Enlaces en un verde más oscuro */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

sl-input[error]::part(base),
sl-textarea[error]::part(base),
sl-select[error]::part(combobox) {
    border-color: var(--sl-color-danger-600);
}

.error,
[error],
[error]::part(form-control-label),
[error]::part(form-control-help-text) {
    color: var(--sl-color-danger-700);
}

sl-input:focus-within[error]::part(base),
sl-textarea:focus-within[error]::part(base),
sl-select:focus-within[error]::part(combobox) {
    border-color: var(--sl-color-danger-600);
    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
}

/* LANDSCAPE */
@media (min-aspect-ratio: 1) {
    [portrait] {
        display: none;
    }
}

/* PORTRAIT */
@media (max-aspect-ratio: 1) {
    [landscape] {
        display: none;
    }
}

/* --------------------------------------------------------------------------- */

.action-button::part(label) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-button sl-icon {
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------- */

.table-list {
    --table-border-radius: 0.5rem;
    width: 100%;
    margin: 1rem 0;
    border-radius: var(--table-border-radius);
    border-collapse: collapse;
}

.table-list thead th {
    background-color: var(--sl-color-neutral-200);
    padding: 0.5em;
}

.table-list thead th:first-child {
    border-top-left-radius: var(--table-border-radius);
}

.table-list thead th:last-child {
    border-top-right-radius: var(--table-border-radius);
}

/* LANDSCAPE */
@media (min-aspect-ratio: 1) {
    .table-list {
        display: table;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .table-list thead {
        display: table-header-group;
    }

    .table-list tbody {
        display: table-row-group;
        gap: 0;
    }

    .table-list tr,
    .table-list .list-item {
        display: table-row;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0.5em;
    }
}

/* PORTRAIT */
@media (max-aspect-ratio: 1) {
    .table-list {
        display: flex;
        flex-direction: column;
        background-color: transparent;
        box-shadow: none;
    }

    .table-list thead {
        display: none;
    }

    .table-list tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .table-list tr,
    .table-list .list-item {
        display: flex;
        flex-direction: column;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: var(--table-border-radius);
        padding: 0.5em;
    }
}