/* ==========================================================================
   Botanical Precision
   Sistema visual compartido con IoVendo BackOffice.

   Extraido de las 14 vistas que ya lo usan en IoVendo_Final. Los valores son
   identicos a proposito: es la misma identidad, no una variante.

   Diferencias respecto del original, todas deliberadas:
     - Hoja compartida en vez de un bloque <style> repetido en cada vista
     - Los controles de formulario pasan de .mi-form-* a .bot-form-*: eran
       genericos con nombre de modulo
     - Se agregan estados de foco visibles para navegacion por teclado

   Tema unico claro. No hay contraparte oscura: un verde lima sobre fondo
   oscuro pierde el caracter, y habria que disenarla, no invertirla.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
    --bot-primary:        #8BC34A;
    --bot-primary-dark:   #689F38;
    --bot-primary-light:  #DCEDC8;
    --bot-primary-soft:   rgba(139, 195, 74, 0.1);

    --bot-bg:             #F1F3EF;   /* neutro con sesgo verdoso, no gris puro */
    --bot-surface:        #FFFFFF;
    --bot-input-bg:       #F5F7F4;

    --bot-text:           #212121;
    --bot-text-secondary: #757575;
    --bot-text-disabled:  #BDBDBD;

    --bot-danger:         #EF5350;
    --bot-warning:        #FFA726;
    --bot-info:           #29B6F6;

    --bot-border:         rgba(0, 0, 0, 0.05);
    --bot-border-solid:   #E8EBE8;

    --bot-radius:         8px;
    --bot-radius-sm:      6px;

    --bot-shadow:         0 2px 8px rgba(0, 0, 0, 0.04);
    --bot-shadow-hover:   0 8px 24px rgba(0, 0, 0, 0.08);

    --bot-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Base --------------------------------------------------------------- */

body {
    background: var(--bot-bg);
    color: var(--bot-text);
    font-family: var(--bot-font);
}

:focus-visible {
    outline: 2px solid var(--bot-primary-dark);
    outline-offset: 2px;
}

/* --- Encabezado de pagina ----------------------------------------------- */

.bot-page-header {
    margin-bottom: 12px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.bot-page-header h1 {
    font-family: var(--bot-font);
    font-size: 22px;
    font-weight: 800;
    color: var(--bot-text);
    margin: 0 0 2px;
    letter-spacing: -0.3px;
}

.bot-page-header p {
    font-family: var(--bot-font);
    font-size: 12px;
    color: var(--bot-text-secondary);
    margin: 0;
}

.bot-header-actions,
.bot-sec-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Botones ------------------------------------------------------------ */

.bot-btn {
    font-family: var(--bot-font);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--bot-radius);
    padding: 0 14px;
    height: 36px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

.bot-btn .material-symbols-outlined { font-size: 15px; }

.bot-btn:disabled { opacity: 0.45; pointer-events: none; }

.bot-btn-sm { height: 28px; padding: 0 10px; font-size: 11px; }

.bot-btn-primary {
    background: var(--bot-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(139, 195, 74, 0.25);
}

.bot-btn-primary:hover {
    background: var(--bot-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(139, 195, 74, 0.35);
}

.bot-btn-outline {
    background: var(--bot-surface);
    color: var(--bot-text);
    border: 1px solid #E0E0E0;
}

.bot-btn-outline:hover { background: #F5F5F5; border-color: #BDBDBD; }

.bot-btn-danger {
    background: var(--bot-surface);
    color: #D32F2F;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.bot-btn-danger:hover { background: rgba(244, 67, 54, 0.05); }

.bot-btn-warning {
    background: var(--bot-surface);
    color: #E65100;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.bot-btn-warning:hover { background: rgba(255, 152, 0, 0.05); }

@media (prefers-reduced-motion: reduce) {
    .bot-btn, .bot-btn-primary:hover { transition: none; transform: none; }
}

/* --- Contenedores ------------------------------------------------------- */

.bot-content-card {
    background: var(--bot-surface);
    border-radius: var(--bot-radius);
    box-shadow: var(--bot-shadow);
    overflow: hidden;
}

.bot-master-detail {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 500px;
}

/* --- Panel maestro ------------------------------------------------------ */

.bot-grid-panel {
    border-right: 1px solid var(--bot-border-solid);
    overflow-y: auto;
    max-height: calc(100vh - 260px);
}

.bot-grid-item {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.12s;
    border-left: 3px solid transparent;
    font-family: var(--bot-font);
}

.bot-grid-item:hover { background: var(--bot-bg); }

.bot-grid-item.active {
    background: var(--bot-primary-soft);
    border-left-color: var(--bot-primary);
}

.bot-grid-item-id   { font-size: 12px; font-weight: 700; color: var(--bot-text); }
.bot-grid-item-desc { font-size: 11px; color: var(--bot-text-secondary); }
.bot-grid-item-meta { font-size: 10px; color: var(--bot-text-disabled); }

.bot-grid-count,
.bot-grid-empty {
    padding: 10px 14px;
    font-size: 11px;
    color: var(--bot-text-secondary);
}

/* --- Panel de detalle --------------------------------------------------- */

.bot-detail-panel {
    padding: 20px 24px;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    background: var(--bot-surface);
}

.bot-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bot-text-disabled);
    text-align: center;
    font-family: var(--bot-font);
}

/* --- Indicadores -------------------------------------------------------- */

.bot-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--bot-font);
}

.bot-pill {
    background: var(--bot-surface);
    border: 1px solid var(--bot-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--bot-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--bot-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.bot-pill:hover,
.bot-pill.active {
    background: var(--bot-primary-soft);
    color: var(--bot-primary-dark);
    border-color: var(--bot-primary-soft);
}

.bot-pills-row,
.bot-filter-row,
.bot-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Indicadores numericos ---------------------------------------------- */

.bot-kpi-row { display: flex; gap: 10px; flex-wrap: wrap; }

.bot-kpi-card {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--bot-radius-sm);
    background: var(--bot-bg);
    border: 1px solid var(--bot-border);
    font-family: var(--bot-font);
}

.bot-kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bot-text-secondary);
    margin: 0 0 2px;
}

.bot-kpi-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--bot-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* --- Formularios --------------------------------------------------------
   Promovidos desde .mi-form-* del original: eran controles genericos que
   habian quedado con el prefijo del modulo donde nacieron.
   ------------------------------------------------------------------------ */

.bot-form-row   { display: flex; gap: 12px; flex-wrap: wrap; }
.bot-form-group { flex: 1; min-width: 180px; margin-bottom: 12px; }

.bot-form-label {
    display: block;
    font-family: var(--bot-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--bot-text-secondary);
    margin-bottom: 4px;
}

.bot-form-input,
.bot-form-select,
.bot-form-textarea {
    width: 100%;
    padding: 0 10px;
    background: var(--bot-input-bg);
    border: 1px solid #E0E0E0;
    border-radius: var(--bot-radius-sm);
    font-family: var(--bot-font);
    font-size: 13px;
    color: var(--bot-text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.bot-form-input,
.bot-form-select { height: 36px; }

.bot-form-textarea { padding: 8px 10px; min-height: 72px; resize: vertical; }

.bot-form-input:focus,
.bot-form-select:focus,
.bot-form-textarea:focus {
    border-color: var(--bot-primary);
    box-shadow: 0 0 0 2px var(--bot-primary-soft);
}

.bot-form-input:read-only,
.bot-form-input:disabled,
.bot-form-select:disabled {
    background: #EEEEEE;
    color: var(--bot-text-secondary);
}

/* --- Buscador principal ------------------------------------------------- */

.bot-omnibox-container {
    flex: 1;
    position: relative;
    min-width: 300px;
}

.bot-omnibox-container .material-symbols-outlined {
    position: absolute;
    left: 12px;
    top: 12px;
    color: var(--bot-text-disabled);
}

.bot-omnibox-container input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--bot-border-solid);
    border-radius: var(--bot-radius);
    padding: 0 16px 0 44px;
    font-family: var(--bot-font);
    font-size: 14px;
    color: var(--bot-text);
    background: var(--bot-input-bg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.bot-omnibox-container input:focus {
    border-color: var(--bot-primary);
    box-shadow: 0 0 0 2px var(--bot-primary-soft);
}

/* --- Tablas densas ------------------------------------------------------ */

.bot-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--bot-font);
    font-size: 12px;
}

.bot-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bot-text-secondary);
    background: var(--bot-bg);
    border-bottom: 1px solid var(--bot-border-solid);
    white-space: nowrap;
}

.bot-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--bot-text);
}

.bot-table tbody tr:hover { background: var(--bot-bg); }

.bot-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
    .bot-master-detail { grid-template-columns: 1fr; }
    .bot-grid-panel    { max-height: 300px; border-right: none; border-bottom: 1px solid var(--bot-border-solid); }
    .bot-detail-panel  { max-height: none; }
}

@media (max-width: 600px) {
    .bot-page-header h1 { font-size: 18px; }
    .bot-kpi-card       { min-width: 100px; }
    .bot-omnibox-container { min-width: 0; }
}