/* ==========================================================================
  LaboratorioWP Hosting - Integración con Blocksy Theme
  ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

.lwpch-wrapper {
   /* Heredamos los colores y tipografías dinámicas de Blocksy */
   --lwpch-border: var(--theme-border-color, #e2e8f0);
   --lwpch-text: var(--theme-text-color, #475569);
   --lwpch-heading: var(--theme-heading-color, #1e293b);
   --lwpch-primary: var(--theme-palette-color-1, #2563eb);
   --lwpch-bg: var(--theme-background-color, #ffffff);
   --lwpch-bg-alt: rgba(0, 0, 0, 0.02);
   
   color: var(--lwpch-text);
   font-size: 0.95em;
}

/* Tipografía general */
.lwpch-wrapper h3, .lwpch-wrapper h4 { color: var(--lwpch-heading); font-weight: 600; margin-top: 0; }
.lwpch-wrapper p { margin-top: 0; opacity: 0.9; }

/* Contenedores (Cajas de información) */
.lwpch-box-default { background: var(--lwpch-bg-alt); padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--lwpch-border); }
.lwpch-box-warning { background: #fffbeb; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #fcd34d; color: #92400e; }
.lwpch-box-danger  { background: #fef2f2; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #fca5a5; color: #991b1b; }
.lwpch-box-success { background: #f0fdf4; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #bbf7d0; color: #166534; }
.lwpch-box-info    { background: #eff6ff; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #bfdbfe; color: #1e40af; }

.lwpch-box-title { margin-bottom: 10px; font-size: 1.1em; color: inherit; }

/* Tarjeta Principal del Sitio */
.lwpch-card { border: 1px solid var(--lwpch-border); border-radius: 8px; margin-bottom: 24px; background: var(--lwpch-bg); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); overflow: hidden; }
.lwpch-card-header { padding: 20px; border-bottom: 1px solid var(--lwpch-border); background: var(--lwpch-bg-alt); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.lwpch-card-body { padding: 25px; }

/* Botones (Blocksy Native Feel) */
.lwpch-btn { background: var(--theme-button-background-initial, var(--lwpch-primary)); color: var(--theme-button-text-initial, #fff); border: none; padding: 10px 20px; border-radius: var(--theme-button-border-radius, 4px); font-size: 0.9em; font-weight: 600; cursor: pointer; text-decoration: none; transition: 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }
.lwpch-btn:hover { background: var(--theme-button-background-hover, #1d4ed8); color: var(--theme-button-text-hover, #fff); transform: translateY(-1px); }
.lwpch-btn-outline { background: transparent; color: var(--lwpch-primary); border: 1px solid var(--lwpch-primary); }
.lwpch-btn-outline:hover { background: var(--lwpch-primary); color: #fff; }
.lwpch-btn-danger { background: #dc2626; color: #fff; }
.lwpch-btn-danger:hover { background: #b91c1c; }
.lwpch-btn-warning { background: #d97706; color: #fff; }
.lwpch-btn-warning:hover { background: #b45309; }
.lwpch-btn-text { background: transparent; border: none; color: var(--lwpch-primary); padding: 0; cursor: pointer; font-weight: 600; }
.lwpch-btn-text:hover { text-decoration: underline; }
.lwpch-btn-text-danger { background: transparent; border: none; color: #dc2626; padding: 0; cursor: pointer; font-weight: 600; font-size: 0.85em; }

/* Botones Switch (Caché) */
.lwpch-toggle-btn { padding: 8px 16px; margin-right: 8px; border: 1px solid var(--lwpch-border); border-radius: 4px; background: var(--lwpch-bg); cursor: pointer; font-size: 0.85em; font-weight: 600; color: var(--lwpch-text); transition: 0.2s; }
.lwpch-toggle-btn:hover { border-color: var(--lwpch-primary); }
.lwpch-toggle-btn.active-on { background: #10b981; color: #fff; border-color: #059669; }
.lwpch-toggle-btn.active-off { background: #f59e0b; color: #fff; border-color: #d97706; }
/* NUEVO: Modo Defensivo */
.lwpch-toggle-btn.active-ddos { background: #8b5cf6; color: #fff; border-color: #7c3aed; }

/* Formularios e Inputs */
.lwpch-input-group { display: flex; gap: 10px; margin-top: 5px; margin-bottom: 5px; align-items: center; width: 100%; max-width: 500px; }
.lwpch-input-group input, .lwpch-input-group select { flex: 1; padding: 10px 15px; border: 1px solid var(--theme-form-field-border-color, var(--lwpch-border)); border-radius: 4px; font-size: 0.9em; background: var(--theme-form-field-background, #fff); color: var(--lwpch-text); outline: none; }
.lwpch-input-group input:focus, .lwpch-input-group select:focus { border-color: var(--lwpch-primary); }

/* Listas de datos y Tablas */
.lwpch-data-list { list-style: none; padding: 0; margin: 15px 0 0 0; font-size: 0.95em; }
.lwpch-data-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--lwpch-border); padding: 10px 0; }
.lwpch-data-list li:last-child { border-bottom: none; padding-bottom: 0; }

.lwpch-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.95em; background: var(--lwpch-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.lwpch-table th { text-align: left; padding: 15px; background: var(--lwpch-bg-alt); border-bottom: 2px solid var(--lwpch-border); color: var(--lwpch-heading); font-weight: 600; }
.lwpch-table td { padding: 15px; border-bottom: 1px solid var(--lwpch-border); vertical-align: middle; }

/* Etiquetas (Badges) */
.lwpch-badge { font-size: 0.7em; padding: 5px 12px; border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.lwpch-badge.active { background: #dcfce7; color: #166534; }
.lwpch-badge.staging { background: #fef08a; color: #854d0e; }
.lwpch-badge.provisioning, .lwpch-badge.pending { background: #dbeafe; color: #1e40af; }
.lwpch-badge.suspended { background: #ffedd5; color: #9a3412; }

/* Acordeones (Details / Summary) */
.lwpch-details { background: var(--lwpch-bg); padding: 18px; border: 1px solid var(--lwpch-border); border-radius: 6px; margin-bottom: 15px; }
.lwpch-details summary { cursor: pointer; font-weight: 600; color: var(--lwpch-heading); font-size: 1em; outline: none; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.lwpch-details summary::-webkit-details-marker { display: none; }
.lwpch-details summary::after { content: "▼"; font-size: 0.8em; color: var(--lwpch-primary); transition: transform 0.2s; }
.lwpch-details[open] summary::after { transform: rotate(180deg); }
.lwpch-details-content { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--lwpch-border); }

/* Consola de Logs */
.lwpch-log-box { width: 100%; height: 200px; font-family: monospace; font-size: 0.85em; background: #0f172a; color: #10b981; padding: 15px; border-radius: 6px; border: none; resize: vertical; line-height: 1.6; box-sizing: border-box; }

/* Utilidades Layout */
.lwpch-flex { display: flex; }
.lwpch-justify-between { justify-content: space-between; }
.lwpch-items-center { align-items: center; }
.lwpch-gap-10 { gap: 10px; }
.lwpch-mt-20 { margin-top: 20px; }
.lwpch-mb-20 { margin-bottom: 20px; }
.lwpch-pt-15 { padding-top: 15px; }
.lwpch-border-t { border-top: 1px solid var(--lwpch-border); }
.lwpch-text-right { text-align: right; }
.lwpch-text-sm { font-size: 0.85em; }
.lwpch-text-muted { color: var(--lwpch-text); opacity: 0.8; }
.lwpch-feedback { font-size: 0.85em; font-weight: 600; margin-left: 10px; }
.lwpch-feedback.success { color: #16a34a; }
.lwpch-feedback.warning { color: #d97706; }
.lwpch-feedback.error { color: #dc2626; }

/* ==========================================================================
  LaboratorioWP Hosting - Sistema de Pestañas e Iconos (Mejoras UI)
  ========================================================================== */

/* Importar Google Material Symbols Outlined */

.material-symbols-outlined {
   font-size: 1.2em;
   vertical-align: text-bottom;
   margin-right: 5px;
}

/* Sistema de Pestañas */
.lwpch-tabs {
   margin-top: 20px;
}

.lwpch-tabs-nav {
   display: flex;
   border-bottom: 2px solid var(--lwpch-border);
   margin-bottom: 20px;
   gap: 5px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
}

.lwpch-tab-btn {
   background: transparent;
   border: none;
   padding: 12px 20px;
   font-size: 0.95em;
   font-weight: 600;
   color: var(--lwpch-text);
   cursor: pointer;
   border-bottom: 3px solid transparent;
   margin-bottom: -2px; /* Superponer sobre el borde del contenedor */
   display: flex;
   align-items: center;
   transition: all 0.2s ease;
   white-space: nowrap;
   opacity: 0.7;
}

.lwpch-tab-btn:hover {
   color: var(--lwpch-primary);
   opacity: 1;
   background: var(--lwpch-bg-alt);
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
}

.lwpch-tab-btn.active {
   color: var(--lwpch-primary);
   border-bottom-color: var(--lwpch-primary);
   opacity: 1;
}

/* Contenido de las pestañas */
.lwpch-tab-content {
   display: none;
   animation: lwpchFadeIn 0.3s ease-in-out;
}

.lwpch-tab-content.active {
   display: block;
}

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

/* ==========================================================================
LaboratorioWP Hosting - Copiar al Portapapeles & Toasts
========================================================================== */

/* Botón sutil de copiar */
.lwpch-copy-btn {
 background: transparent;
 border: none;
 color: var(--lwpch-text);
 cursor: pointer;
 opacity: 0.5;
 transition: all 0.2s;
 padding: 0 5px;
 display: inline-flex;
 align-items: center;
}

.lwpch-copy-btn:hover {
 opacity: 1;
 color: var(--lwpch-primary);
 transform: scale(1.1);
}

/* Notificación Flotante (Toast) */
.lwpch-toast {
 position: fixed;
 bottom: 30px;
 right: 30px;
 background: var(--lwpch-heading, #1e293b);
 color: #fff;
 padding: 12px 24px;
 border-radius: 8px;
 box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
 display: flex;
 align-items: center;
 gap: 10px;
 z-index: 99999;
 opacity: 0;
 transform: translateY(20px);
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 pointer-events: none;
}

.lwpch-toast.show {
 opacity: 1;
 transform: translateY(0);
}

/* Animación de carga giratoria */
.lwpch-spin {
animation: lwpchSpin 1s linear infinite;
display: inline-block;
}
@keyframes lwpchSpin {
100% { transform: rotate(360deg); }
}

/* Pantalla de carga superpuesta para la gráfica */
.lwpch-chart-loader {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--lwpch-bg);
z-index: 10;
border-radius: 8px;
color: var(--lwpch-primary);
}

/* ==========================================================================
LaboratorioWP Hosting - Barras de Progreso (Consumo)
========================================================================== */
.lwpch-progress-wrapper {
width: 100%; /* Obliga a la barra a bajar a la siguiente línea */
margin-top: 12px;
margin-bottom: 4px;
}
.lwpch-progress-container {
width: 100%;
background-color: var(--lwpch-border);
border-radius: 6px;
height: 10px;
overflow: hidden;
}
.lwpch-progress-bar {
height: 100%;
border-radius: 6px;
transition: width 0.5s ease-in-out;
}
.lwpch-progress-bar.green { background-color: #10b981; }
.lwpch-progress-bar.orange { background-color: #f59e0b; }
.lwpch-progress-bar.red { background-color: #ef4444; }

.lwpch-upsell-alert {
width: 100%; /* Para que la alerta también tome su propia línea */
text-align: center;
box-sizing: border-box;
font-size: 0.85em;
color: #ef4444;
font-weight: 600;
margin-top: 8px;
background: #fef2f2;
padding: 6px 8px;
border-radius: 4px;
border: 1px solid #fca5a5;
}

/* ==========================================================================
LaboratorioWP Hosting - Modals (Diálogos de Confirmación)
========================================================================== */
.lwpch-modal-overlay {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(15, 23, 42, 0.6);
 backdrop-filter: blur(4px);
 z-index: 999999;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; visibility: hidden;
 transition: all 0.3s ease;
}
.lwpch-modal-overlay.show { opacity: 1; visibility: visible; }

.lwpch-modal {
 background: var(--lwpch-bg, #fff);
 width: 90%; max-width: 400px;
 border-radius: 12px;
 padding: 24px;
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 transform: scale(0.95) translateY(10px);
 transition: all 0.3s ease;
}
.lwpch-modal-overlay.show .lwpch-modal { transform: scale(1) translateY(0); }

.lwpch-modal-title { font-size: 1.2em; font-weight: 700; color: var(--lwpch-heading); margin: 0 0 10px 0; display: flex; align-items: center; gap: 8px;}
.lwpch-modal-desc { font-size: 0.95em; color: var(--lwpch-text); margin: 0 0 20px 0; line-height: 1.5; }
.lwpch-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }