:root {
  --azul: #1d4577; --azul-osc: #14335e; --cian: #2aa7d8; --cian-claro: #e3f4fb;
  --fondo: #eff3f8; --tarjeta: #fff; --borde: #d9e1eb; --texto: #1b2a44; --suave: #6a7b93;
  --peligro: #d64550; --ok: #2f9e6b; --radio: 14px;
  --sombra: 0 1px 2px rgba(20,50,100,.06), 0 4px 14px rgba(20,50,100,.07);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 system-ui, 'Segoe UI', Roboto, sans-serif; color: var(--texto); background: var(--fondo); min-height: 100vh; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
[hidden] { display: none !important; }

/* botones */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borde); background: #fff; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--azul-osc); transition: background .15s, border-color .15s; }
.btn:hover { background: #f4f8fc; border-color: #b9c8da; }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: var(--azul-osc); }
.btn.peligro { color: var(--peligro); }
.btn.peligro:hover { background: #fdf0f1; border-color: #efb9bd; }
.btn.chico { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.icono { padding: 6px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: default; }

/* cabecera */
.cab { background: #fff; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
.cab-in { max-width: 1500px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cab img.logo { height: 46px; display: block; }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tabs a { padding: 9px 15px; border-radius: 10px; text-decoration: none; color: var(--suave); font-weight: 600; white-space: nowrap; }
.tabs a:hover { background: var(--fondo); color: var(--azul-osc); }
.tabs a.activa { background: var(--cian-claro); color: var(--azul); }
.cab-acc { display: flex; gap: 8px; align-items: center; }

main { max-width: 1500px; margin: 0 auto; padding: 22px 20px 70px; }
.titulo-vista { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.titulo-vista h1 { font-size: 24px; color: var(--azul-osc); flex: 1; min-width: 180px; }
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); }
.vacio-grande { text-align: center; padding: 60px 20px; color: var(--suave); }
.vacio-grande p { margin: 6px 0 18px; }

/* shows: calendario mensual */
.mes-nav { display: flex; align-items: center; gap: 8px; }
.mes-nav .mes { font-size: 19px; font-weight: 700; min-width: 170px; text-align: center; text-transform: capitalize; color: var(--azul-osc); }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.cal-cab { background: var(--azul); color: #fff; text-align: center; padding: 8px 0; font-weight: 700; font-size: 13.5px; }
.cal-dia { background: #fff; min-height: 122px; padding: 6px 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-dia:hover { background: #f5f9fd; }
.cal-dia.otro { background: #f4f6f9; }
.cal-dia.otro .cal-num { color: #aab4c3; }
.cal-num { font-weight: 700; font-size: 13.5px; color: var(--suave); width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; }
.cal-dia.hoy .cal-num { background: var(--cian); color: #fff; }
.ev { display: block; width: 100%; text-align: left; border: 0; border-left: 5px solid var(--cian); background: #eef3f9; border-radius: 7px; padding: 4px 7px; cursor: pointer; font-size: 13px; line-height: 1.25; color: var(--texto); overflow: hidden; }
.ev:hover { background: #e1ecf7; }
.ev b { color: var(--azul); margin-right: 4px; }
.ev .ic { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--suave); }
/* un show por día: el show ocupa toda la casilla */
.cal-dia.con-show { position: relative; padding: 0; }
.cal-dia.con-show .cal-num { position: absolute; left: 6px; top: 6px; z-index: 1; }
.cal-dia.con-show .ev { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border-left-width: 6px; padding: 36px 10px 10px 12px; background: var(--cian-claro); font-size: 15px; line-height: 1.25; white-space: normal; }
.cal-dia.con-show .ev:hover { background: #cdebf7; }
.cal-dia.con-show .ev b { display: block; font-size: 18px; margin: 0 0 2px; }
.cal-dia.con-show .ev .ic { position: absolute; right: 8px; bottom: 8px; width: 15px; height: 15px; margin: 0; }
.cal-dia.otro.con-show .ev { opacity: .55; }
.nota-serie { background: var(--cian-claro); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; color: var(--azul-osc); }

/* semana */
.semana-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.catalogo { padding: 16px; position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.catalogo-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.catalogo-cab h2 { font-size: 17px; }
.buscar { width: 100%; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.lista-act { overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 2px 3px 6px 2px; margin: 0 -3px 0 -2px; }
.act-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; cursor: grab; border-left-width: 5px; user-select: none; }
.act-item:hover { box-shadow: 0 2px 8px rgba(20,50,100,.13); }
.act-item.armada { outline: 3px solid var(--cian); background: var(--cian-claro); }
.act-item img, .miniatura-vacia { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; background: #dfe7f1; }
.act-item .nom { font-weight: 700; line-height: 1.15; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.act-item .cat { font-size: 12px; color: var(--suave); font-weight: 600; }
.ayuda { color: var(--suave); font-size: 13px; margin: 8px 2px 0; }

.barra-armada { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cian); color: #fff; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.barra-armada span { flex: 1; }
.barra-armada .btn { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }

.caja-tabla { overflow-x: auto; padding: 4px; }
table.rejilla { border-collapse: separate; border-spacing: 5px; width: 100%; table-layout: fixed; min-width: 1080px; }
.rejilla th { font-weight: 700; }
.rejilla thead th { background: var(--azul); color: #fff; border-radius: 10px; padding: 8px 6px; position: relative; font-size: 14px; }
.rejilla thead th.hoy { background: var(--cian); }
.rejilla thead th.col-hora { width: 112px; background: transparent; color: var(--suave); }
.rejilla .nom-dia { display: block; }
.rejilla .acc-dia { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.rejilla .acc-dia button { border: 0; background: rgba(255,255,255,.18); color: #fff; width: 26px; height: 24px; border-radius: 6px; cursor: pointer; padding: 0; }
.rejilla .acc-dia button:hover { background: rgba(255,255,255,.34); }
.rejilla .acc-dia .ic { width: 14px; height: 14px; vertical-align: -2px; }
.rejilla th.fila-hora { background: #f4f7fb; border-radius: 10px; padding: 4px 4px 4px 8px; text-align: left; }
.fila-hora .hh { display: flex; align-items: center; gap: 2px; }
.fila-hora input[type=time] { border: 0; background: transparent; font-weight: 700; font-size: 15px; width: 84px; padding: 4px 0; color: var(--azul-osc); }
.fila-hora button { border: 0; background: none; color: var(--suave); cursor: pointer; padding: 4px; border-radius: 6px; }
.fila-hora button:hover { color: var(--peligro); background: #fdf0f1; }
td.celda { height: 66px; padding: 0; border-radius: 10px; background: #f4f7fb; border: 2px dashed transparent; vertical-align: middle; transition: background .12s; cursor: pointer; position: relative; }
td.celda.vacia:hover { background: var(--cian-claro); border-color: #a8d9ec; }
td.celda.sobre { background: var(--cian-claro); border-color: var(--cian); }
body.armada td.celda { cursor: copy; }
.chip { height: 100%; margin: 0; display: flex; align-items: center; gap: 6px; padding: 4px 18px 4px 5px; background: #fff; border-radius: 8px; border-left: 5px solid #888; box-shadow: 0 1px 4px rgba(20,50,100,.18); cursor: grab; overflow: hidden; position: relative; }
.chip img, .chip .miniatura-vacia { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; flex: none; }
.chip .nom { font-weight: 700; font-size: 12.5px; line-height: 1.1; overflow-wrap: break-word; min-width: 0; }
.chip .quitar { position: absolute; right: 2px; top: 2px; border: 0; background: none; color: var(--suave); cursor: pointer; padding: 2px; border-radius: 6px; line-height: 0; }
.chip .quitar:hover { color: #fff; background: var(--peligro); }
.chip .quitar .ic { width: 14px; height: 14px; }
.nueva-hora { display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px; flex-wrap: wrap; }
.nueva-hora input[type=time] { padding: 7px 10px; border: 1px solid var(--borde); border-radius: 10px; }

/* categorías */
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.panel { padding: 20px; }
.panel h2 { font-size: 18px; margin-bottom: 4px; }
.panel .sub { color: var(--suave); margin: 0 0 14px; font-size: 14px; }
.fila-cat { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #edf1f6; flex-wrap: wrap; }
.fila-cat input[type=color] { width: 40px; height: 36px; border: 1px solid var(--borde); border-radius: 9px; padding: 2px; background: #fff; cursor: pointer; flex: none; }
.fila-cat input[type=text] { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 9px; font-weight: 600; }
.fila-cat select { padding: 7px 8px; border: 1px solid var(--borde); border-radius: 9px; background: #fff; }
.fila-cat .uso { color: var(--suave); font-size: 13px; min-width: 64px; text-align: right; }

/* ajustes */
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; align-items: start; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo > label, .campo > .rotulo { font-weight: 700; font-size: 13.5px; color: #3a4f72; }
.campo input[type=text], .campo input[type=date], .campo input[type=time], .campo input[type=number], .campo input[type=password], .campo select { padding: 9px 11px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; width: 100%; }
.campo input:focus, .campo select:focus, .buscar:focus, .fila-cat input:focus { outline: 2px solid var(--cian); outline-offset: 1px; border-color: var(--cian); }
.campo .nota { color: var(--suave); font-size: 13px; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 600; margin-bottom: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--azul); }
.url-fila { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid #edf1f6; flex-wrap: wrap; }
.url-fila b { min-width: 118px; }
.url-fila code { flex: 1; background: #f3f6fa; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; word-break: break-all; }

/* selector de imagen */
.caja-img { position: relative; border: 2px dashed #b9c8da; border-radius: 12px; background: #f4f7fb center / cover; overflow: hidden; cursor: pointer; width: 100%; }
.caja-img.sobre { border-color: var(--cian); background-color: var(--cian-claro); }
.caja-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; background: #e5ebf3; user-select: none; -webkit-user-drag: none; }
.caja-img.logo img { background: #fff; padding: 6px; }
.caja-img .vacio { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--suave); font-weight: 600; padding: 12px; gap: 6px; }
.caja-img.subiendo::after { content: 'Subiendo…'; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--azul); }
.marca-foco { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--azul), 0 2px 8px rgba(0,0,0,.45); pointer-events: none; background: rgba(42,167,216,.35); }
.botones-img { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mini-tv { border-radius: 10px; background: #dfe7f1 center / cover no-repeat; border: 1px solid var(--borde); box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* ventana */
.cortina { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(15,30,60,.5); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 14px; overflow-y: auto; }
.ventana { background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(10,25,55,.4); width: 100%; max-width: 780px; margin: auto 0; }
.ventana.estrecha { max-width: 460px; }
.ventana-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--borde); }
.ventana-cab h2 { font-size: 20px; color: var(--azul-osc); }
.ventana-cuerpo { padding: 20px 22px; }
.ventana-pie { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--borde); align-items: center; }
.ventana-pie .izq { margin-right: auto; }
.ventana-pie .btn { white-space: nowrap; flex: none; }
.form-show { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
.error-form { color: var(--peligro); font-weight: 600; margin-right: auto; }
.selector-act { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.selector-act .act-item { cursor: pointer; }

/* avisos */
#avisos { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.aviso { background: var(--azul-osc); color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 360px; animation: sube .2s; }
.aviso.error { background: var(--peligro); }
.aviso.ok { background: var(--ok); }
@keyframes sube { from { transform: translateY(10px); opacity: 0; } }