body { font-family: 'Roboto', sans-serif; background-color: #111827; color: #fff; margin: 0; padding: 20px; box-sizing: border-box; }
h1 { color: #E22822; text-align: center; font-family: 'Cinzel', serif; border-bottom: 2px solid #E22822; padding-bottom: 10px; margin-top:0; }

.master-container { display: flex; gap: 15px; height: 85vh; margin-top: 20px; }

/* PANELES GLOBALES */
.panel { background: #1f2937; padding: 20px; border-radius: 10px; border: 1px solid #374151; overflow-y: auto; display: flex; flex-direction: column; }
.panel-izq { flex: 1; }
.panel-centro { flex: 1.5; }
.panel-der { flex: 1.2; }

/* BOTONES DE COMBATE (NUEVO DISEÑO DIVIDIDO) */
.botones-combate { display: flex; gap: 5px; margin-bottom: 15px; }
.botones-combate button { color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.3s; flex: 1; }
#btn-combate { background: #10b981; }
#btn-turno { background: #3b82f6; display: none; }

/* TARJETAS DE COMBATIENTES (INICIATIVA) */
.jugador-card { background: #374151; border-radius: 8px; padding: 12px; margin-bottom: 10px; border-left: 5px solid #3b82f6; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: all 0.2s; }
.monstruo-card-init { background: #374151; border-radius: 8px; padding: 12px; margin-bottom: 10px; border-left: 5px solid #ef4444; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: all 0.2s; }
.npc-card-init { background: #374151; border-radius: 8px; padding: 12px; margin-bottom: 10px; border-left: 5px solid #10b981; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: all 0.2s; }

/* SISTEMA INTELIGENTE DE TURNOS */
.turno-activo { border-left: 5px solid #fbbf24 !important; border-right: 5px solid #fbbf24 !important; box-shadow: 0 0 15px rgba(251, 191, 36, 0.5) !important; transform: scale(1.02); background: #4b5563; z-index: 10; position: relative; }
.turno-perdido { opacity: 0.6; filter: grayscale(0.6); }
.turno-perdido-activo { border-left: 5px solid #ef4444 !important; border-right: 5px solid #ef4444 !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important; transform: scale(1.02); background: #451a1a !important; opacity: 0.95; position: relative; z-index: 10; filter: none; }

/* ARRASTRE (DRAG AND DROP) */
.arrastrando { opacity: 0.5; border: 1px dashed #9ca3af !important; transform: scale(0.98); }
.drag-over-visual { border-top: 4px dashed #10b981 !important; transform: translateY(2px); box-shadow: 0 -5px 10px rgba(16, 185, 129, 0.2); }

.j-header { display: flex; justify-content: space-between; font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #f3f4f6;}
.j-init { color: #fbbf24; background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 12px; font-size: 12px; }
.j-stats { display: flex; justify-content: space-between; font-size: 12px; color: #9ca3af; margin-bottom: 5px; }
.hp-bar-bg { background: #111827; height: 8px; border-radius: 4px; overflow: hidden; border: 1px solid #000; }
.hp-bar-fill { height: 100%; transition: 0.5s; }

/* CREADOR Y CONTROL DE ENTIDADES */
.creador-box { background: #111827; padding: 15px; border-radius: 8px; border: 1px dashed #6b7280; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.creador-box input, .creador-box select { background: #374151; color: white; border: 1px solid #4b5563; padding: 8px 6px; border-radius: 4px; font-size: 12px; min-width: 0; box-sizing: border-box; }
.btn-rojo { background: #ef4444; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-rojo:hover { background: #dc2626; }

/* TARJETA DE ENTIDAD ACTIVA */
.m-act-card { background: #4b5563; border-radius: 8px; padding: 15px; margin-bottom: 10px; border: 1px solid #6b7280; }
.m-act-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #6b7280; padding-bottom: 8px;}
.m-ataque-box { display: flex; flex-direction: column; gap: 8px; background: #1f2937; padding: 12px; border-radius: 8px; border: 1px solid #374151; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);}
.m-atk-row { display: flex; align-items: center; gap: 10px; } 
.m-atk-label { font-size: 11px; font-weight: bold; color: #9ca3af; width: 75px; text-transform: uppercase; letter-spacing: 0.5px;}
.m-atk-inputs { display: flex; align-items: center; gap: 5px; background: #111827; padding: 4px 10px; border-radius: 6px; border: 1px solid #4b5563; } 
.m-atk-inputs input, .m-atk-inputs select { background: transparent !important; border: none !important; color: white; padding: 2px !important; text-align: center; font-size: 13px; outline: none; }
.m-atk-inputs input[type="number"] { width: 35px; font-weight: bold; }
.m-atk-inputs select { cursor: pointer; width: auto; font-weight: bold; color: #fbbf24;} 
.m-atk-btn { width: 120px; padding: 7px 10px; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-left: auto; } 

/* LOG */
#pantalla-master { flex: 1; background: #000; padding: 15px; border-radius: 8px; border: 1px solid #111; overflow-y: auto; font-family: 'Courier New', Courier, monospace; }
.tirada { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #444; font-size: 14px; }
.jugador { color: #3b82f6; font-weight: bold; }
.accion { color: #a8a29e; }
.resultado { color: #10b981; font-weight: bold; }
.enemigo-log { color: #ef4444; font-weight: bold; }
.npc-log { color: #10b981; font-weight: bold; }

option { background-color: #1f2937; color: #fff; }
optgroup { background-color: #111827; color: #9ca3af; font-style: normal; font-weight: bold; }

@media (max-width: 1000px) { .master-container { flex-direction: column; height: auto; } }

/* =========================================================
   PANELES DESPLEGABLES (ACORDEONES)
   ========================================================= */
.box-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.2s;
    user-select: none; /* Evita que el texto se seleccione al hacer doble clic */
}

.box-header:hover {
    opacity: 0.7;
}

.toggle-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* Estado cerrado de la caja */
.box-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

.box-content.collapsed {
    display: none;
}

/* Animación para que aparezca suavemente */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}