/* assets/css/view_orden.css */

/* =========================================================
   1. VARIABLES DE COLOR (LOGICA CORRECTA: OSCURO DEFAULT)
   ========================================================= */

/* --- TEMA OSCURO (POR DEFECTO - SIN CLASES) --- */
:root {
    --vo-bg-app: transparent;   /* Transparente para ver tu fondo negro */
    --vo-bg-card: #18181b;      /* Tarjeta Gris Muy Oscuro */
    --vo-border: #27272a;       /* Borde Sutil Oscuro */
    --vo-text-main: #ffffff;    /* Texto Blanco */
    --vo-text-muted: #a1a1aa;   /* Texto Gris Claro */
    
    /* Iconos */
    --vo-icon-box-bg: #f4f4f5;  /* Cuadro icono CLARO en modo oscuro (Perfil) */
    --vo-icon-box-color: #71717a; 
    --vo-icon-bg: #27272a;      /* Fondo botones redondos */
    --vo-icon-color: #cbd5e1;
    
    --vo-input-bg: #09090b;     /* Inputs Negros */
    --vo-hover: #27272a;
    --vo-accent: #3b82f6;       /* Azul */
    --vo-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --vo-overlay: rgba(0, 0, 0, 0.8); /* Fondo del modal */
}

/* --- TEMA CLARO (SOLO SI BODY TIENE .light-mode) --- */
body.light-mode {
    --vo-bg-app: #f3f4f6;
    --vo-bg-card: #ffffff;
    --vo-border: #e5e7eb;
    --vo-text-main: #111827;
    --vo-text-muted: #6b7280;
    
    /* Iconos */
    --vo-icon-box-bg: #f3f4f6;
    --vo-icon-box-color: #9ca3af;
    --vo-icon-bg: #f3f4f6;
    --vo-icon-color: #94a3b8;
    
    --vo-input-bg: #ffffff;
    --vo-hover: #f9fafb;
    --vo-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
    --vo-overlay: rgba(0, 0, 0, 0.5);
}

/* =========================================================
   2. ESTILOS VISUALES
   ========================================================= */

#vistaVerOrden {
    background-color: var(--vo-bg-app);
    color: var(--vo-text-main);
    min-height: 100%;
    padding: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Tipografía */
.vo-title { font-size: 1.5rem; font-weight: 700; color: var(--vo-text-main); margin: 0; }
.vo-breadcrumb { color: var(--vo-text-muted); font-size: 0.85rem; }

/* Botones Generales */
.vo-btn {
    background-color: var(--vo-bg-card);
    border: 1px solid var(--vo-border);
    color: var(--vo-text-muted);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: 6px;
    transition: 0.2s; cursor: pointer;
}
.vo-btn:hover { background-color: var(--vo-hover); color: var(--vo-text-main); border-color: var(--vo-text-muted); }

/* Botón Primario (Modal) */
.vo-btn-primary {
    background-color: var(--vo-accent) !important;
    color: #ffffff !important;
    border: none !important;
}
.vo-btn-primary:hover { opacity: 0.9; }

/* Tarjetas */
.vo-card {
    background-color: var(--vo-bg-card);
    border: 1px solid var(--vo-border);
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    display: flex; align-items: center; position: relative;
    box-shadow: var(--vo-shadow);
}

.vo-card-main {
    background-color: var(--vo-bg-card);
    border: 1px solid var(--vo-border);
    border-radius: 12px;
    margin-top: 20px;
    box-shadow: var(--vo-shadow);
    overflow: hidden;
}

/* Iconos Perfil (Cuadro Grande) */
.vo-icon-box-lg {
    width: 85px; height: 85px;
    background-color: var(--vo-icon-box-bg);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: var(--vo-icon-box-color);
    margin-right: 20px; flex-shrink: 0;
}

/* Iconos Equipo (Cuadro Normal) */
.vo-icon-box {
    width: 60px; height: 60px;
    background-color: var(--vo-icon-bg);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--vo-icon-color);
    margin-right: 15px; flex-shrink: 0;
}

/* Badges */
.vo-badge-pill {
    background-color: #3f3f46;
    color: #e4e4e7;
    font-size: 0.7rem; padding: 2px 10px;
    border-radius: 12px; font-weight: 600; 
    display: inline-block; margin-right: 8px;
}
body.light-mode .vo-badge-pill { background-color: #e5e7eb; color: #4b5563; }

/* Botones Circulares */
.vo-btn-circle {
    width: 32px; height: 32px;
    border-radius: 8px; background-color: var(--vo-icon-bg);
    color: var(--vo-text-muted); border: none;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s; cursor: pointer; font-size: 0.9rem;
}
.vo-btn-circle:hover { background-color: var(--vo-accent); color: white; }

/* Header Tarjeta Orden */
.vo-card-header {
    padding: 15px 25px;
    border-bottom: 1px solid var(--vo-border);
    display: flex; justify-content: space-between; align-items: center;
    background-color: var(--vo-bg-card);
}

/* Cajas Encapsuladas (Doble Box) */
.vo-box {
    border: 1px solid var(--vo-border);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 15px;
    background-color: transparent;
}
.vo-box:last-child { margin-bottom: 0; }

/* Datos */
.vo-data-row { display: flex; margin-bottom: 6px; align-items: baseline; }
.vo-label { font-weight: 700; color: var(--vo-text-muted); width: 140px; font-size: 0.85rem; flex-shrink: 0; }
.vo-value { color: var(--vo-text-main); font-size: 0.9rem; }

/* Descripciones */
.vo-desc-label { display: block; font-weight: 700; color: var(--vo-text-muted); font-size: 0.85rem; margin-bottom: 2px; }
.vo-desc-text { color: var(--vo-text-main); font-size: 0.9rem; margin-bottom: 12px; }

/* Footer Pasos */
.vo-steps { display: flex; gap: 0; }
.vo-step {
    background-color: var(--vo-icon-bg);
    color: var(--vo-text-muted);
    padding: 6px 20px 6px 15px;
    font-size: 0.8rem; font-weight: 700;
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
    margin-right: -10px; padding-left: 20px; z-index: 1;
}
.vo-step:first-child { 
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%); 
    border-radius: 4px 0 0 4px; padding-left: 15px; margin-right: -5px; z-index: 2;
}
.vo-step.active { background-color: var(--vo-accent); color: white; }

/* =========================================================
   3. ESTILOS DEL MODAL (CON VARIABLES)
   ========================================================= */

.vo-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--vo-overlay);
    z-index: 2000; /* Encima de todo */
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    animation: fadeIn 0.2s ease-in-out;
}

.vo-modal {
    background-color: var(--vo-bg-card);
    border: 1px solid var(--vo-border);
    border-radius: 12px;
    width: 90%; max-width: 450px;
    box-shadow: var(--vo-shadow);
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.vo-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--vo-border);
    display: flex; justify-content: space-between; align-items: center;
    background-color: var(--vo-bg-card);
}
.vo-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--vo-text-main); margin: 0; }
.vo-btn-close {
    background: transparent; border: none; font-size: 1.5rem; color: var(--vo-text-muted); cursor: pointer;
}

.vo-modal-body { padding: 20px; }

.vo-form-group { margin-bottom: 15px; }
.vo-form-label { display: block; margin-bottom: 5px; color: var(--vo-text-muted); font-weight: 600; font-size: 0.9rem; }

/* Selects adaptables al tema */
.vo-select {
    width: 100%;
    padding: 10px;
    background-color: var(--vo-input-bg);
    border: 1px solid var(--vo-border);
    border-radius: 6px;
    color: var(--vo-text-main);
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
}
.vo-select:focus { border-color: var(--vo-accent); }

/* Corrección de opciones en select para Chrome/Windows Dark Mode */
.vo-select option {
    background-color: var(--vo-bg-card);
    color: var(--vo-text-main);
}

.vo-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--vo-border);
    display: flex; justify-content: flex-end; gap: 10px;
    background-color: var(--vo-bg-card);
}


/* =========================================================
   4. ESTILOS DROPDOWN WHATSAPP (MODO NEGRO/DARK)
   ========================================================= */

/* --- POR DEFECTO (MODO OSCURO / NEGRO) --- */
.vo-dropdown-menu {
    background-color: #09090b !important; /* Negro Profundo (Zinc-950) */
    border: 1px solid #27272a !important; /* Borde gris muy oscuro sutil */
    border-radius: 8px !important;
    padding: 8px 0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 1); /* Sombra fuerte negra */
    min-width: 250px;
    margin-top: 10px !important;
}

/* Items del menú en Oscuro */
.vo-dropdown-menu .dropdown-item {
    color: #e4e4e7 !important; /* Texto blanco (Zinc-200) */
    font-size: 0.9rem;
    padding: 12px 16px; /* Un poco más de aire para toque táctil */
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Hover: Un gris apenas más claro para notar la selección */
.vo-dropdown-menu .dropdown-item:hover {
    background-color: #27272a !important; /* Zinc-800 */
    color: #ffffff !important;
}

.vo-dropdown-menu .dropdown-item i {
    width: 20px;
    color: #a1a1aa; /* Icono gris medio */
    margin-right: 10px;
}

/* Flechita decorativa (Triángulo arriba) - DEBE SER NEGRA TAMBIÉN */
.vo-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 15px;
    width: 12px;
    height: 12px;
    background-color: #09090b; /* Mismo negro que el menú */
    transform: rotate(45deg);
    border-top: 1px solid #27272a; /* Mismo borde */
    border-left: 1px solid #27272a;
}

/* --- MODO CLARO (SOLO SI BODY TIENE .light-mode) --- */
body.light-mode .vo-dropdown-menu {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.light-mode .vo-dropdown-menu .dropdown-item {
    color: #374151 !important;
}

body.light-mode .vo-dropdown-menu .dropdown-item:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

body.light-mode .vo-dropdown-menu::before {
    background-color: #ffffff;
    border-color: #e5e7eb;
}


/* =========================================================
   5. ESTILOS MODAL WHATSAPP
   ========================================================= */

/* Botón Verde WhatsApp */
.vo-btn-whatsapp {
    background-color: #25D366 !important; /* Verde oficial WhatsApp */
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vo-btn-whatsapp:hover {
    background-color: #20bd5a !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Textarea estilizado igual que los selects */
.vo-textarea {
    width: 100%;
    padding: 10px;
    background-color: var(--vo-input-bg);
    border: 1px solid var(--vo-border);
    border-radius: 6px;
    color: var(--vo-text-main);
    font-size: 0.95rem;
    outline: none;
    resize: vertical;
    min-height: 100px; /* Altura para el mensaje */
    font-family: inherit;
}
.vo-textarea:focus {
    border-color: var(--vo-accent);
}

/* =========================================================
   5. ESTILOS MODAL WHATSAPP (REPLICA GESTIOO)
   ========================================================= */

/* Estilo Fieldset (Caja con borde y título incrustado) */
.vo-fieldset {
    border: 1px solid #3f3f46; /* Gris borde sutil */
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.vo-legend {
    font-size: 0.85rem;
    color: #a1a1aa; /* Gris texto */
    position: absolute;
    top: -10px; /* Sube la etiqueta para cortar el borde */
    left: 10px;
    background-color: var(--vo-bg-card); /* Fondo igual al modal para tapar la línea */
    padding: 0 5px;
    font-weight: 500;
}

/* Inputs transparentes dentro del fieldset */
.vo-input-transparent {
    background: transparent !important;
    border: none !important;
    color: var(--vo-text-main) !important;
    width: 100%;
    outline: none !important;
    font-size: 0.95rem;
    padding: 0;
}
.vo-input-transparent:focus {
    box-shadow: none !important;
}

/* Textarea específico */
.vo-textarea-transparent {
    background: transparent !important;
    border: none !important;
    color: var(--vo-text-main) !important;
    width: 100%;
    outline: none !important;
    resize: none;
    min-height: 100px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Botón Verde Whatsapp Flotante */
.vo-btn-whatsapp {
    background-color: #10b981 !important; /* Verde un poco más oscuro/elegante */
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}
.vo-btn-whatsapp:hover {
    background-color: #059669 !important;
}