/* ============================================================================
TRRANU · modales.css · modales flotantes y chatbot (DEBE cargar el ULTIMO)
----------------------------------------------------------------------------
Extraído de default.php SIN modificar una sola regla. Se carga desde el
con . EL ORDEN IMPORTA y es:
app.css -> admin.css -> modales.css
Motivo: existen dos @keyframes llamados 'pulse' con cuerpos distintos (uno
en app.css y otro en modales.css). El del final es el que debe ganar, tal
como ocurría cuando todo estaba dentro de default.php. Si inviertes el
orden de los , las animaciones cambian de aspecto.
============================================================================ */
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.85}}
@keyframes mcTyping{0%,60%,100%{opacity:0.3}30%{opacity:1}}
.mc-typing{letter-spacing:2px;animation:mcTyping 1.2s infinite;}
.fmod{position:fixed;background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.4);z-index:99999;min-width:280px;min-height:120px;border:2px solid #ef4444;overflow:hidden;flex-direction:column}
.fmod{display:none}
.fmod[style*="display: block"],.fmod[style*="display:block"]{display:flex!important;flex-direction:column}
.fmod-head{background:linear-gradient(135deg,#dc2626,#f87171);color:#fff;padding:10px 14px;cursor:move;display:flex;justify-content:space-between;align-items:center;user-select:none;flex-shrink:0}
.fmod-title{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.fmod-buttons{display:flex;gap:6px}
.fmod-btn{background:rgba(255,255,255,.25);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.fmod-btn:hover{background:rgba(255,255,255,.45)}
.fmod-body{padding:14px;overflow:auto;background:#fff;color:#111;flex:1;position:relative}
.fmod.minimized{height:auto!important;min-height:0!important}
.fmod.minimized .fmod-body{display:none}
.fmod.minimized .rh{display:none}
/* 8-direction resize handles */
.rh{position:absolute;z-index:3;background:transparent}
.rh-n{top:0;left:8px;right:8px;height:6px;cursor:ns-resize}
.rh-s{bottom:0;left:8px;right:8px;height:6px;cursor:ns-resize}
.rh-e{top:8px;bottom:8px;right:0;width:6px;cursor:ew-resize}
.rh-w{top:8px;bottom:8px;left:0;width:6px;cursor:ew-resize}
.rh-ne{top:0;right:0;width:14px;height:14px;cursor:nesw-resize}
.rh-nw{top:0;left:0;width:14px;height:14px;cursor:nwse-resize}
.rh-se{bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#94a3b8 50%,#94a3b8 60%,transparent 60%,transparent 70%,#94a3b8 70%,#94a3b8 80%,transparent 80%);border-bottom-right-radius:12px}
.rh-sw{bottom:0;left:0;width:14px;height:14px;cursor:nesw-resize}
.fmod-row{padding:6px 8px;border-bottom:1px solid #f1f5f9;font-size:13px;color:#111}
.fmod-row b{color:#dc2626;display:inline-block;min-width:90px}
.dst-hit{background:rgba(239,68,68,.10)!important;border-left:4px solid #dc2626!important;padding-left:8px}
.dst-fullcontent{font-size:12px;line-height:1.5}
.dst-fullcontent table{border-collapse:collapse;width:100%;font-size:11px}
.dst-fullcontent td,.dst-fullcontent th{border:1px solid #e5e7eb;padding:4px 6px}
.dst-fullcontent img{max-width:100%;height:auto}
mark.dst-mark{background:#fef08a;color:#111;padding:1px 4px;border-radius:3px;font-weight:700;transition:all .25s}
mark.dst-mark.dst-mark-active{background:#f59e0b;color:#fff;box-shadow:0 0 0 3px rgba(245,158,11,.45),0 4px 12px rgba(245,158,11,.5);transform:scale(1.05);animation:dstPulse .8s ease-in-out}
@keyframes dstPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1.05)}}