:root { --azul: #1c6f7e; --rojo: #d1242f; --verde: #1a7f37; --gris: #57606a; --borde: #d0d7de; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1f2328; min-height: 100vh; background: linear-gradient(135deg, #dde1e6 0%, #e9ebef 45%, #f5f6f8 100%) fixed; }
header { background: #2b2e33; color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.logo { color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 10px; }
.logo-img { height: 42px; width: auto; }
.badge-dry { background: #9a6700; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: block; }
.avatar-icon { width: 28px; height: 28px; border-radius: 50%; background: #444c56; color: #cfd3d8; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.usuario { font-size: 14px; color: #cfd3d8; margin-left: -4px; }
.header-sep { color: #555c66; font-size: 16px; user-select: none; }
.btn-logout { background: transparent; border: none; color: #cfd3d8; font-size: 14px; text-decoration: none; padding: 0; cursor: pointer; }
.btn-logout:hover { color: #fff; filter: none; }
main { max-width: 900px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 30px; }

/* Lista de servicios */
table.servicios { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 14px; overflow: visible; box-shadow: 0 6px 24px rgba(15, 23, 42, .07); }
table.servicios thead th { background: var(--azul); color: #fff; text-align: left; padding: 14px 22px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
table.servicios tbody td { padding: 16px 22px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
table.servicios tbody tr:last-child td { border-bottom: 0; }
table.servicios tbody tr:hover td { background: #f7fafc; }
table.servicios td.col-nombre { font-weight: 600; color: #1f2328; border-left: 6px solid transparent; }
tr.fila-activa td.col-nombre { border-left-color: #1a7f37; }
tr.fila-inactiva td.col-nombre { border-left-color: #cbd2da; }
/* Alineada a la izquierda como su cabecera y como el resto de columnas. */
.col-acciones { text-align: left; white-space: nowrap; }

.tag { font-size: 12px; padding: 2px 8px; border-radius: 12px; background: #eaeef2; }
.tag-bienvenida { background: #ddf4ff; color: #0969da; }
.tag-ivr { background: #fff1e5; color: #bc4c00; }

.estado { font-weight: 600; font-size: 13px; }
.estado-ok { color: var(--verde); }
.estado-incidencia { color: var(--rojo); }
.estado-activa, .estado-inactiva { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.estado-activa::before, .estado-inactiva::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.estado-activa { background: #d6f5e0; color: #137a3a; }
.estado-activa::before { background: #1a7f37; }
.estado-inactiva { background: #eef1f4; color: #6b7280; }
.estado-inactiva::before { background: #9aa3af; }

.btn { display: inline-block; background: var(--azul); color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; text-decoration: none; cursor: pointer; font-size: 14px; }
.btn:hover { filter: brightness(1.05); }
.btn-aplicar { background: var(--azul); }
.btn-revertir { background: var(--rojo); }
.inline { display: inline; margin-left: 6px; }

form { margin: 16px 0; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 110px; transition: border-color .15s, box-shadow .15s; }
textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(28, 111, 126, .15); }

.preview { background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 16px; margin-top: 16px; }
.preview audio { width: 100%; margin: 10px 0; }

.aviso { padding: 12px 14px; border-radius: 8px; margin: 16px 0; }
.aviso-incidencia { background: #fff8c5; border: 1px solid #d4a72c; }
.aviso-error { background: #ffebe9; border: 1px solid var(--rojo); }

/* Aviso de campos obligatorios sin rellenar (debajo del título) */
.aviso-campos {
  background: #fdecec;
  border: 1px solid var(--rojo);
  color: var(--rojo);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
}
/* Etiqueta/título de un campo obligatorio sin rellenar */
.label-error { color: var(--rojo) !important; }

/* Login */
.login-body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: #fff; }
.banda { width: 100%; }
.banda-blanca { background: #fff; }
.banda-top { height: 70px; }
.banda-gris { flex: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #dde1e6 0%, #e9ebef 45%, #f5f6f8 100%); }
.banda-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 0; }
.footer-logo { height: 46px; width: auto; }
.banda-bottom p { margin: 0; font-size: 13px; color: var(--gris); }
.login-card { background: #fff; width: 100%; max-width: 360px; padding: 32px 28px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); text-align: center; }
.card-logo { height: 64px; width: auto; margin-bottom: 10px; }
.login-card h1 { margin: 0 0 0; font-size: 22px; }
.login-sub { color: var(--gris); margin: 4px 0 20px; }
.login-card label { text-align: left; display: block; font-weight: 600; margin: 12px 0 6px; font-size: 14px; }
.login-card input { width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.btn-login { width: 100%; margin-top: 20px; padding: 11px; font-size: 15px; background: #1c6f7e; color: #fff; border: 0; }
.btn-login:hover { background: #185f6c; filter: none; }
.mensaje-actual { white-space: pre-wrap; background: #fff; border: 1px solid var(--borde); border-radius: 6px; padding: 8px; margin: 8px 0; font: inherit; }

.bloque-idioma { background: #fff; border-radius: 16px; padding: 22px 24px; margin: 18px 0; box-shadow: 0 4px 18px rgba(15, 23, 42, .07); }
.bloque-idioma[style*="display:none"] { display: none !important; }
.idioma-titulo { margin: 0 0 14px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--azul); }
.muted { color: var(--gris); font-size: .9em; }
.controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }

.radio { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; border: 1px solid var(--borde); border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 500; background: #fff; transition: border-color .15s, background .15s, color .15s; }
.radio:hover { border-color: var(--azul); }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio:has(input:checked) { border-color: var(--azul); background: rgba(28, 111, 126, .10); color: var(--azul); font-weight: 600; }
.btn-generar { background: var(--gris); }
.btn-escuchar { background: var(--gris); margin-left: auto; }
.btn-descargar { background: var(--azul); color: #fff; border: 0; }
.estado-gen { font-size: 13px; color: var(--gris); }
.preview-audio, .preview-combinada { width: 100%; margin-top: 8px; }
#btn-aplicar:disabled { opacity: .5; cursor: not-allowed; }
.acciones-finales { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.btn-paso { font-size: 16px; font-weight: 600; padding: 14px 28px; border-radius: 12px; min-width: 190px; text-align: center; }
.btn-descargar:disabled { opacity: .5; cursor: not-allowed; }
/* Descargas del audio ya generado (una por fichero final). */
#descargas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.app-layout { display: flex; min-height: calc(100vh - 66px); }

.sidebar { width: 260px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--borde); padding: 16px 0; display: flex; flex-direction: column; }
.sidebar-section-title { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f2328; padding: 0 16px 8px; }
.sidebar-divider { height: 1px; background: var(--borde); margin: 10px 16px; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 20px; font-size: 14px; color: #3d444d; text-decoration: none; border-left: 3px solid transparent; transition: background .1s, color .1s; }
.nav-item:hover { background: #f6f8fa; color: #1f2328; }
.nav-item--active { border-left-color: var(--azul); color: var(--azul); background: #f0f6ff; font-weight: 600; }
.nav-item--danger { color: var(--rojo); }
.nav-item--danger:hover { background: #fff0f0; }
.nav-icon { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }

.main-content { flex: 1; padding: 24px; min-width: 0; }

/* ── Home ─── */
.home-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 12px; }
.home-logo { height: 72px; width: auto; margin-bottom: 8px; }
.home-title { font-size: 24px; font-weight: 600; color: #1f2328; }
.home-sub { font-size: 15px; color: var(--gris); }

/* ── Locuciones creadas ─── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-header h2 { font-size: 20px; margin: 0; }
/* Segundo bloque de una pantalla, separado del anterior por una línea. */
.seccion-separada { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--borde); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtro-input { padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 14px; min-width: 220px; }
.filtro-input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(28, 111, 126, .15); }
.filtro-select { padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: #1f2328; min-width: 160px; }
.filtro-select:disabled { opacity: .45; cursor: not-allowed; }

.btn-gris { background: var(--gris); }
.btn-verde { background: var(--verde); }

.results-count { font-size: 13px; color: var(--gris); margin-bottom: 10px; }

.tabla-wrap { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(15, 23, 42, .07); }

.empty-state { padding: 48px 24px; text-align: center; color: var(--gris); }
.empty-title { font-size: 16px; font-weight: 600; color: #1f2328; margin-bottom: 6px; }
.empty-sub { font-size: 14px; }

/* ── Menú desplegable de acciones ─── */
.actions-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.menu-wrap { position: relative; display: inline-block; }

.btn-dots { background: none; border: 1px solid var(--borde); border-radius: 6px; padding: 5px 10px; cursor: pointer; color: var(--gris); font-size: 16px; line-height: 1; letter-spacing: 2px; }
.btn-dots:hover { background: #f6f8fa; }

.loc-dropdown { position: fixed; background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 150px; z-index: 1000; overflow: hidden; }
.loc-dropdown.hidden { display: none; }

.drop-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: #1f2328; text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; }
.drop-item:hover { background: #f6f8fa; }
.drop-item--danger { color: var(--rojo); }
.drop-item--danger:hover { background: #fff0f0; }
.drop-item--success { color: var(--verde); }
.drop-item--success:hover { background: #f0fff4; }
.drop-divider { height: 1px; background: var(--borde); margin: 2px 0; }
/* Las opciones que son <form> no deben heredar el margen global de formulario:
   dentro del menú van pegadas, como los enlaces. */
.loc-dropdown form { margin: 0; }

/* ── Formulario crear/modificar locución ─── */
.campos-horizontal { display: flex; gap: 18px 24px; flex-wrap: wrap; align-items: flex-end; }
.campo-grupo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.campo-grupo label { font-weight: 600; font-size: 14px; margin: 0; }

.btn-volver { background: var(--gris); margin-bottom: 12px; display: inline-block; }
.btn-con-texto { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-subtexto { font-size: 12px; color: var(--gris); text-align: center; max-width: 200px; }
.traducir-wrap { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.traducir-label { font-size: 13px; color: var(--gris); font-weight: 500; }
.btn-traducir { background: #f0f6ff; color: var(--azul); border: 1px solid var(--azul); padding: 5px 12px; font-size: 13px; }
.btn-traducir:hover { background: var(--azul); color: #fff; filter: none; }
.btn-traducir-azure { background: #f5f0ff; color: #534AB7; border-color: #534AB7; }
.btn-traducir-azure:hover { background: #534AB7; color: #fff; filter: none; }
.traducir-estado { font-size: 12px; color: var(--gris); }

/* ── Traducción ─────────────────────────────────────────────────── */
.traduccion-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.traduccion-header .idioma-titulo { margin: 0; }
.btn-seleccionar { background: #f0f6ff; color: var(--azul); border: 1px solid var(--azul); font-size: 13px; padding: 5px 14px; }
.btn-seleccionar:hover:not(:disabled) { background: var(--azul); color: #fff; filter: none; }
.btn-seleccionar:disabled { opacity: .4; cursor: not-allowed; }
.texto-traduccion { width: 100%; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 110px; background: #f9fafb; color: #444; }
.bloque-seleccionado { border: 2px solid var(--azul) !important; }
.traducir-estado { font-size: 12px; color: var(--gris); margin-top: 4px; display: block; }

/* ── Traducción ─────────────────────────────────────────────────── */
.traduccion-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.traduccion-header .idioma-titulo { margin: 0; }
.btn-seleccionar { background: #f0f6ff; color: var(--azul); border: 1px solid var(--azul); font-size: 13px; padding: 5px 14px; }
.btn-seleccionar:hover { background: var(--azul); color: #fff; filter: none; }
.btn-seleccionar--activo { background: var(--azul); color: #fff; }
.texto-traduccion { width: 100%; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 110px; background: #f9fafb; color: #444; }
.bloque-seleccionado { border: 2px solid var(--azul) !important; }
.traducir-estado { font-size: 12px; color: var(--gris); margin-top: 6px; display: block; }

/* ── Layout dos columnas servicio ───────────────────────────────── */
.layout-servicio { display: grid; grid-template-columns: 1.2fr 220px; gap: 16px; align-items: start; }
.col-bloques { display: flex; flex-direction: column; }
.col-bloques .bloque-idioma { margin: 0 0 16px 0; }
.col-panel { position: sticky; top: 24px; }
.controles-esp { min-width: 16px; flex: 1; }

.panel-acciones { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.panel-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin-bottom: 6px; }
.panel-sep { height: 1px; background: var(--borde); margin: 4px 0; }
.btn-panel { width: 100%; justify-content: center; padding: 11px; font-size: 14px; font-weight: 600; border-radius: 10px; text-align: center; }
#panel-combinado .preview-combinada { width: 100%; height: 32px; }

/* Esquinas redondeadas de la tabla */
table.servicios thead tr th:first-child { border-top-left-radius: 14px; }
table.servicios thead tr th:last-child  { border-top-right-radius: 14px; }
table.servicios tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
table.servicios tbody tr:last-child td:last-child  { border-bottom-right-radius: 14px; }
/* ── Plataformas agrupadas ───────────────────────────────────────────────── */
.plataforma-bloque { background: #fff; border-radius: 14px; box-shadow: 0 6px 24px rgba(15,23,42,.07); margin-bottom: 24px; overflow: hidden; }
.plataforma-header { background: var(--azul); padding: 13px 22px; display: flex; align-items: center; gap: 10px; }
.plataforma-nombre { font-size: 13px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .05em; }
.plataforma-body { padding: 8px 22px 10px; display: flex; flex-direction: column; gap: 0; }
.plataforma-body .bloque-idioma { box-shadow: none; margin: 0; padding: 14px 22px; }
.plataforma-body form { display: flex; flex-direction: column; gap: 14px; }

/* Naranja para Euskera Azure */
/* Variante naranja de un bloque de traducción (la azul es la de por defecto). */
.idioma-titulo--naranja { color: #bc4c00; }
.btn-seleccionar--naranja { background: #fff1e5; color: #bc4c00; border: 1px solid #bc4c00; }
.btn-seleccionar--naranja:hover:not(:disabled) { background: #bc4c00; color: #fff; filter: none; }
.btn-seleccionar--naranja.btn-seleccionar--activo { background: #bc4c00; color: #fff; }
.bloque-naranja.bloque-seleccionado { border-color: #bc4c00 !important; }