/* Complemento de style.css: formularios, avisos, canales y chat (usa tus mismas variables) */

.oculto { display: none !important; }

.contenedor.ancho { max-width: 1100px; }

.form-caja {
    max-width: 420px;
    margin: 1rem auto;
    background: var(--panel);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--verde);
}

.campo { display: block; margin-bottom: 1rem; font-weight: bold; }

.campo input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.7rem 0.8rem;
    background: var(--fondo);
    color: var(--texto);
    border: 2px solid var(--verde);
    border-radius: 6px;
    font: inherit;
}
.campo input:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }

.form-caja .boton { width: 100%; border: none; cursor: pointer; font: inherit; font-weight: bold; }
.form-pie { margin-top: 1rem; text-align: center; }
.form-pie a { color: var(--verde); }

.aviso {
    max-width: 420px;
    margin: 0 auto 1rem;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background: var(--panel);
    border-left: 4px solid var(--verde);
}
.aviso-error { border-left-color: var(--rojo); color: var(--rojo); font-weight: bold; }

/* ---------- Disposición: canales + chat ---------- */
.chat-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.canales {
    flex: none;
    width: 220px;
    height: calc(100dvh - 12rem);
    min-height: 320px;
    overflow-y: auto;
    background: var(--panel);
    border-radius: 8px;
    border-left: 4px solid var(--verde);
    padding: 0.8rem;
}
.canales-det summary { cursor: pointer; font-weight: bold; list-style: none; }
.canales-det summary::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .canales-det summary { display: none; } }

.canal-sec {
    margin: 0.8rem 0 0.3rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.canal-sec:first-child { margin-top: 0; }
.canal-item {
    display: block;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    color: var(--texto);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.canal-item:hover { background: var(--fondo); }
.canal-item.activo { background: var(--verde); color: var(--fondo); font-weight: bold; }

/* ---------- Chat ---------- */
.chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 12rem);
    min-height: 320px;
    background: var(--panel);
    border-radius: 8px;
    border-left: 4px solid var(--verde);
    overflow: hidden;
}

.mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.msg {
    max-width: 80%;
    align-self: flex-start;
    background: var(--fondo);
    border: 1px solid var(--verde);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
}
.msg.propio { align-self: flex-end; border-color: var(--dorado); }

.msg-cab { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.85rem; }
.msg-cab span { opacity: 0.65; font-size: 0.75rem; }

/* ---------- Markdown dentro de los mensajes ---------- */
.msg-texto { overflow-wrap: anywhere; }
.msg-texto > :first-child { margin-top: 0; }
.msg-texto > :last-child { margin-bottom: 0; }
.msg-texto p { margin: 0.25rem 0; }
.msg-texto a { color: var(--dorado); text-decoration: underline; }
.msg-texto code {
    font-family: monospace;
    font-size: 0.92em;
    background: rgba(128, 128, 128, 0.25);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}
.msg-texto pre {
    background: rgb(17, 17, 17);
    padding: 0.7rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.4rem 0;
}
.msg-texto pre code { background: none; padding: 0; color: rgb(135, 206, 250); white-space: pre; }
.msg-texto blockquote {
    margin: 0.4rem 0;
    padding: 0.1rem 0.7rem;
    border-left: 3px solid var(--verde);
    opacity: 0.85;
}
.msg-texto ul, .msg-texto ol { margin: 0.3rem 0 0.3rem 1.4rem; }
.msg-texto hr { border: none; border-top: 1px solid var(--verde); margin: 0.5rem 0; }
.msg-texto .md-h { font-weight: bold; margin: 0.4rem 0 0.2rem; }
.msg-texto .md-h1 { font-size: 1.25rem; }
.msg-texto .md-h2 { font-size: 1.12rem; }
.msg-texto .md-h3 { font-size: 1.02rem; }

.msg-texto .md-sub { font-size: 0.75rem; opacity: 0.7; margin: 0.15rem 0; }
.msg-texto .md-banner {
    margin: 0.4rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-weight: bold;
}
.msg-texto .md-banner a, .msg-texto .md-banner code { color: inherit; }

.msg-texto .md-img-a { display: inline-block; margin: 0.3rem 0; }
.msg-texto .md-img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    border-radius: 8px;
}

/* ANSI (```ansi) */
.msg-texto pre.md-ansi code { color: #d4d4d4; }
.ansi-b { font-weight: bold; }
.ansi-d { opacity: 0.6; }
.ansi-i { font-style: italic; }
.ansi-u { text-decoration: underline; }
.ansi-s { text-decoration: line-through; }
.ansi-f0 { color: #4f545c; } .ansi-f1 { color: #dc322f; } .ansi-f2 { color: #859900; }
.ansi-f3 { color: #b58900; } .ansi-f4 { color: #268bd2; } .ansi-f5 { color: #d33682; }
.ansi-f6 { color: #2aa198; } .ansi-f7 { color: #ffffff; }
.ansi-f8 { color: #7b8794; } .ansi-f9 { color: #ff6b68; } .ansi-f10 { color: #a3be3c; }
.ansi-f11 { color: #e5b92e; } .ansi-f12 { color: #5db3f0; } .ansi-f13 { color: #f06aa5; }
.ansi-f14 { color: #4cc9bf; } .ansi-f15 { color: #ffffff; }
.ansi-g0 { background: #4f545c; } .ansi-g1 { background: #dc322f; } .ansi-g2 { background: #859900; }
.ansi-g3 { background: #b58900; } .ansi-g4 { background: #268bd2; } .ansi-g5 { background: #d33682; }
.ansi-g6 { background: #2aa198; } .ansi-g7 { background: #ffffff; }
.ansi-g8 { background: #7b8794; } .ansi-g9 { background: #ff6b68; } .ansi-g10 { background: #a3be3c; }
.ansi-g11 { background: #e5b92e; } .ansi-g12 { background: #5db3f0; } .ansi-g13 { background: #f06aa5; }
.ansi-g14 { background: #4cc9bf; } .ansi-g15 { background: #ffffff; }

/* ---------- Archivos adjuntos (abajo del mensaje) ---------- */
.msg-adjuntos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.msg-adj {
    display: block;
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    border: 1px solid var(--verde);
}
.msg-archivo {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--verde);
    border-radius: 6px;
    color: var(--texto);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.msg-archivo:hover { background: var(--verde); color: var(--fondo); }

/* ---------- Formulario de envío ---------- */
.chat-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem;
    border-top: 2px solid var(--verde);
}
.chat-fila { display: flex; gap: 0.5rem; align-items: flex-end; }

.chat-form textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    padding: 0.7rem 0.8rem;
    background: var(--fondo);
    color: var(--texto);
    border: 2px solid var(--verde);
    border-radius: 6px;
    font: inherit;
    line-height: 1.4;
    max-height: 160px;
}
.chat-form textarea:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }

.btn-adjuntar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 2px solid var(--verde);
    border-radius: 6px;
    font-size: 1.2rem;
    cursor: pointer;
    user-select: none;
}
.btn-adjuntar:hover { background: var(--verde); }

.chat-form .boton { border: none; cursor: pointer; font: inherit; font-weight: bold; white-space: nowrap; }
.chat-form .boton:disabled { opacity: 0.6; cursor: default; }

.error-envio { color: var(--rojo); font-weight: bold; font-size: 0.9rem; }

.previas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.previa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 220px;
    padding: 0.25rem 0.4rem;
    background: var(--fondo);
    border: 1px solid var(--verde);
    border-radius: 6px;
}
.previa img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.previa-ico { font-size: 1.4rem; }
.previa-nombre { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-x {
    background: transparent;
    border: none;
    color: var(--rojo);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
}


/* ---------- Barra lateral: cabecera, ayuda, vacío ---------- */
.canales-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.btn-nuevo {
    min-width: 32px;
    min-height: 32px;
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--verde);
    border-radius: 6px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.btn-nuevo:hover { background: var(--verde); color: var(--fondo); }
.canales-ayuda { margin-top: 0.8rem; font-size: 0.72rem; opacity: 0.6; }
.canal-vacio { padding: 0.2rem 0.6rem; font-size: 0.8rem; opacity: 0.5; font-style: italic; }
.canal-sec, .canal-item { -webkit-touch-callout: none; user-select: none; }
.msg-editado { font-style: italic; }
.msg.propio { -webkit-touch-callout: none; }

/* ---------- Menú contextual ---------- */
.ctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 190px;
    padding: 0.3rem;
    background: var(--panel);
    color: var(--texto);
    border: 2px solid var(--verde);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ctx-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.8rem;
    text-align: left;
    background: transparent;
    color: inherit;
    border: none;
    border-radius: 5px;
    font: inherit;
    cursor: pointer;
}
.ctx-item:hover, .ctx-item:focus-visible { background: var(--verde); color: var(--fondo); outline: none; }
.ctx-item.peligro { color: var(--rojo); }
.ctx-item.peligro:hover, .ctx-item.peligro:focus-visible { background: var(--rojo); color: #fff; }
.ctx-sep { height: 1px; margin: 0.3rem 0.2rem; background: var(--verde); opacity: 0.4; }

/* ---------- Diálogos ---------- */
.modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}
.modal {
    width: min(100%, 420px);
    max-height: 90dvh;
    overflow-y: auto;
    padding: 1.2rem;
    background: var(--panel);
    color: var(--texto);
    border-left: 4px solid var(--verde);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.modal h3 { margin-bottom: 0.6rem; color: var(--verde); }
.modal p { margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.modal label { display: block; margin-top: 0.6rem; font-weight: bold; }
.modal input, .modal textarea, .modal select {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem 0.7rem;
    background: var(--fondo);
    color: var(--texto);
    border: 2px solid var(--verde);
    border-radius: 6px;
    font: inherit;
}
.modal textarea { resize: vertical; }
.modal input:focus, .modal textarea:focus, .modal select:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }
.modal-ayuda { margin-top: 0.3rem; font-size: 0.78rem; opacity: 0.7; }
.modal .error-envio { margin-top: 0.6rem; }
.modal-botones { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.modal-botones .boton {
    width: auto;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: bold;
    padding: 0.6rem 1.1rem;
}
.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--verde); }
.boton.secundario:hover { background: var(--verde); color: var(--fondo); }
.boton.peligro { background: var(--rojo); color: #fff; }
.boton.peligro:hover { background: var(--rojo); color: #fff; filter: brightness(0.9); }
.boton:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 900px) {
    .chat-layout { flex-direction: column; gap: 0.6rem; }
    .canales { width: 100%; height: auto; min-height: 0; max-height: 45vh; }
    .chat { width: 100%; height: calc(100dvh - 15rem); min-height: 300px; }
    .msg { max-width: 92%; }
    .chat-form .boton { display: inline-block; padding: 0 1rem; min-height: 44px; }
}