* {
    font-family: 'Poppins', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background: #262626;
    color: #e5e5e5;
    display: grid;
    grid-template-rows: 70px 1fr 30px;
    height: 100vh;
    overflow: hidden;
}

/* TOP BAR */
#topbar {
    background: #404040;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    margin: 10px;
    border-radius: 5px;
}

#topbar .logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 10px;
}

#topbar .icono {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

#topbar .icono-r {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

#topmenu {
    background: #2e2e2e;
    display: flex;
    align-items: center;
    padding: 0 6px;
    gap: 10px;
    margin: 10px;
    border-radius: 12px;
    height: 40px;
}

.top-btn,
.top-btn-r {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.top-btn {
    background: #2e2e2e;
    color: #fff;
    padding: 8px;
    font-size: 12px;
    height: 30px;
}

.top-btn-r {
    background: #404040;
    height: 30px;
}

.top-btn:hover,
.top-btn-r:hover {
    background: #666;
}

#zoom-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 20px;
}

.zoom-icon {
    font-size: 18px;
    color: #fff;
    margin-right: 5px;
}

.zoom-btn {
    background: #2e2e2e;
    /* gris */
    color: #fff;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    /* redondo */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s;
}

.zoom-btn:hover {
    background: #666;
    /* más claro al hover */
}

#zoom-level {
    width: 40px;
    text-align: center;
    font-size: 14px;
}

/* MAIN LAYOUT */
#main {
    display: grid;
    grid-template-columns: 80px 1fr 260px;
    padding: 10px;
    padding-top: 0px;
    gap: 0px;
    overflow: hidden;
}

/* LEFT SIDEBAR */
#sidebar-left {
    width: 65px;
    background: #404040;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    gap: 2px;
    border-radius: 5px;
    align-items: center;
    align-self: start;
}

#sidebar-left hr {
    width: 70%;
    border: none;
    border-top: 1px dotted #797979;
}

#sidebar-left .icono {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.sidebar-title {
    font-size: 12px;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
}

.sidebar-title-r {
    font-size: 12px;
    color: #fff;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.tool-btn {
    background: #404040;
    border: none;
    width: 35px;
    height: 35px;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-btn:hover {
    background: #666;
}

#workspace {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #666;
    position: relative;
    overflow: auto;         /* scroll si la pantalla simulada es más grande */
    background: #3b3b3b;
    border-radius: 5px;
    margin-right: 10px;
    pointer-events: auto;
}

#canvas {
    position: relative;
    width: max-content;
    /* se ajusta al contenido */
    height: max-content;
    /* se ajusta al contenido */
    min-width: 100%;
    /* ocupar al menos todo el workspace horizontal */
    min-height: 100%;
    /* ocupar al menos todo el workspace vertical */
    transform-origin: top left;
}

.simulated-screen {
    background: #202020;
    border: 2px solid #555;
    position: absolute;
    cursor: grab;
    box-sizing: border-box;
    overflow: hidden;
}

#workspace.has-screen {
    align-items: flex-start;
    /* cuando hay pantalla, se alinea arriba */
}

/* RIGHT PANEL */
#sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 100%;      /* limita al contenedor padre */
    overflow-y: auto;      /* aparece scroll si el contenido es más grande */
    box-sizing: border-box;
    padding-right: 5px;
    scroll-behavior: smooth;
}

/* OPCIONAL: estilizar la barra de scroll en Webkit (Chrome, Edge, Safari) */
#sidebar-right::-webkit-scrollbar {
    width: 8px;
}

#sidebar-right::-webkit-scrollbar-track {
    background: #2e2e2e;
    border-radius: 5px;
}

#sidebar-right::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 5px;
}

#sidebar-right::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.panel {
    background: #404040;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 15px 15px 15px;
}

.panel label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
}

.panel input {
    width: 70px;
    padding: 6px;
    border-radius: 5px;
    border: none;
    background: #1b1b1b;
    color: #fff;
}

.panel input[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
}

.panel select {
    width: 100%;
    padding: 6px;
    border-radius: 5px;
    border: none;
    background: #1b1b1b;
    color: #fff;
}

.row-inputs {
    display: flex;
    gap: 50px;
}

.row-inputs div {
    display: flex;
    flex-direction: column;
}

/* FOOTER */
#footer {
    background: #181818;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #e5e5e5;
    height: 30px;
    margin-bottom: 0;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #404040;
    padding: 10px;
    padding-top: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-width: 800px;
    color: #fff;
    min-height: 300px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
}

.modal-columns {
    display: flex;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
    height: 100%;
}

.col {
    flex: 1;
    width: auto;
}

.col h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    text-align: left;
    width: auto;
}

#col-preview {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px;
    height: 250px;
    width: 200px;
}

#col-preview h4 {
    margin-bottom: 0px;
}

#col-preview img {
    margin-bottom: 5px;
    display: inline-block;
    height: 200px;
    width: 200px;
    border-radius: 5px;
}

#color-led {
    padding: 7px;
    border-radius: 5px;
    border: none;
    background: #1b1b1b;
    color: #fff;
    width: 80%;
}

.btn-add {
    margin-top: 0px;
    padding: 8px 12px;
    background: #2e2e2e;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    width: 100%;
    transition: background 0.2s;
}

.btn-add:hover {
    background: #666;
}

.modal .close-btn {
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    align-items: center;
    text-align: center;
    font-size: 16px;
}

.modal .modal-title {
    padding-left: 10px;
}

.modal .close-btn:hover {
    background-color: #666;
}

.modal hr {
    width: 98%;
    border: none;
    border-top: 1px dotted #797979;
}

.modal .tipo-placa {
    background-color: #1b1b1b;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    min-width: 150px;
    height: 220px;
}

.modal .tipo-placa option {
    height: 25px;
    align-items: center;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

.modal input {
    height: 30px;
    border-radius: 5px;
    border: none;
    background: #1b1b1b;
    color: #fff;
    padding-left: 10px;
}

.modal .nota {
    font-size: 10px;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 20px;
}

.safe-area {
    position: absolute;
    border: 1px dotted red;
    box-sizing: border-box;
    pointer-events: none; /* no interfiere con drag */
    z-index: 1000;
}

.led-plate{
    position: absolute;
    background-color: #202020;
}

.led-plate.selected {
    outline: 1px solid rgb(117, 117, 117); /* color azul, puedes cambiarlo */
    outline-offset: -1px;     /* ajusta para que no aumente tamaño */
}

.led-segment {
    position: absolute;
    width: 100%;
    height: 100%;

    background-color: rgb(255, 40, 40); /* rojo por defecto */

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    opacity: 0;
    pointer-events: none;
}

.panel .selector-color{
    width: 30px;
    height: 30px;
    border: 0px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.panel .unica-linea{
    display: flex;
    gap: 10px;
    margin-top:5px;
}

.panel .unica-linea label{
    padding-top: 5px;
}

#lista-capas {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.capa-item.active {
    background: #3a5cff;
    border-color: #3a5cff;
}

.capa-item {
    display: flex;             
    justify-content: space-between; 
    align-items: center;
    padding: 4px 8px;
    background: #222;
    color: #fff;
    margin-bottom: 2px;
    border-radius: 4px;
    cursor: pointer;
    position: relative; /* necesario para posicionamiento interno si quieres */
    height: 30px;
}

.capa-item:hover {
    background: #3a5cff;
}

/* Nombre de la capa */
.capa-nombre {
    flex: 1;  
    font-size: 12px;
}

/* Botón de basura */
.btn-basura {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;

    opacity: 0;               /* inicialmente invisible */
    transition: opacity 0.2s ease; /* suaviza aparición */
}

/* Mostrar botón solo al pasar el mouse sobre la capa */
.capa-item:hover .btn-basura {
    opacity: 1;
}

/* Imagen dentro del botón */
.img-basura {
    width: 16px;
    height: 16px;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.btn-basura:hover .img-basura {
    transform: scale(1.2);
}

.capa-item.dragging {
    opacity: 0.5;
}

.capa-eye,
.btn-basura,
.img-basura {
    pointer-events: auto;
}

.capa-eye{
    width: 16px;
    height: 16px;
    margin-right: 10px;
    cursor: pointer;
}

.capa-nombre {
    pointer-events: none;
}

/* =======================
   TEXTO LIBRE
   ======================= */
.text-layer {
    position: absolute;
    cursor: grab;
    user-select: none;
    transform-origin: top left;
    border: 1px dashed transparent;
    box-sizing: border-box; 
}

.text-layer.selected {
    border: 1px dashed #4da3ff;
}

.text-content {
    white-space: pre-wrap;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #ffffff;
    pointer-events: none;
}

.text-layer.editing {
    cursor: text;
    color:#181818;
}

.text-layer.editing .text-content {
    pointer-events: auto;
    user-select: text;
}

.btn-toggle {
    width:30px;
    height: 30px;
    cursor: pointer;
    border: 0px;
    background-color: #222;
    color: #fff;
    border-radius: 5px;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}

.btn-toggle:hover{
    background-color: #666;
}

.btn-toggle.active {
    background-color: #f5f5f5;
    color: #222;
}

.image-layer {
    cursor: grab;
    user-select: none;
    transform-origin: top left;
}

.image-layer.selected {
    outline: 2px dashed #00bfff;
}

.screen-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* no bloquea drag */
}

/* Contenedor relativo */
.dropdown-container {
    display: inline-block;
    position: relative;
}

/* Menú desplegable al lado derecho */
.dropdown-content {
    display: none; /* oculto por defecto */
    position: absolute;
    top: 0;        /* alineado con la parte superior del botón */
    left: 100%;    /* justo a la derecha del botón */
    margin-left: 5px; /* pequeño espacio entre botón y menú */
    background: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 5px;
    min-width: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 1000;
}

/* Opciones individuales */
.dropdown-content div {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;     /* centrado vertical */
    justify-content: center; /* centrado horizontal (opcional) */
}

/* Hover sobre opción */
.dropdown-content div:hover {
    background: #555;
}

.capa-orden {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    margin-right: 10px;
}

.btn-orden {
    background: transparent;
    border: none;
    padding: 0;
    width: 16px;
    height: 14px;

    font-size: 10px;
    line-height: 1;
    cursor: pointer;

    color: #aaa;
}

.btn-orden:hover {
    color: #fff;
}

.shape-layer.selected {
    outline: 2px dashed #00bfff;
}

#visibilidad-area{
    margin-left:50px;
}

#visibilidad-area .icono{
    width: 20px;
    height: 20px;
}

.sec-btn {
    background: #2e2e2e;
    /* gris */
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    /* redondo */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s;
}

.sec-btn:hover {
    background: #666;
    /* más claro al hover */
}

.top-btn.disabled, .tool-btn.disabled, .top-btn-r.disabled{
    opacity: 0.3;          /* apariencia de deshabilitado */
    cursor: not-allowed;   /* cursor de “no permitido” */
    pointer-events: auto;  /* evita clicks */
}

#panel-aliniamiento{
    margin-left:50px;
    display:flex;
}

#panel-aliniamiento .sec-btn{
    margin-right: 5px;
}

#panel-aliniamiento .disabled {
    opacity: 0.3;          /* apariencia de deshabilitado */
    cursor: not-allowed;   /* cursor de “no permitido” */
    pointer-events: auto;  /* evita clicks */
}

.modal-inicio {
    background: #404040;
    padding: 10px;
    padding-top: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    color: #fff;
}

.plantillas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin:10px;
}

#plantillas-grid2{
    display: none;
    margin-top:20px;
}

.sub-plantillas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin:10px;
}

.sub-plantillas-grid .modal-header{
    display:block;
}

.plantilla-card {
    border: 1px solid #444;
    padding: 20px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    transition: all 0.2s ease;
}

.plantilla-card.activa {
    background: #1e6bff;
}

.plantilla-card:hover {
    background: #333;
    transform: translateY(-2px);
}

.plantilla-card p{
    font-size: 16px;
}

.panel #text-content-input{
    width:92%;
}

#panel-prop-texto .row-inputs{
    margin-top:10px;
}

.margin-reference {
    display: none;
}

#btn-visibilidad-area .icono{
    opacity: 0.4;
}

#btn-centrar-pantalla {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #2e2e2e;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

#btn-centrar-pantalla:hover {
    background: #3a5cff;
}

#btn-centrar-pantalla {
    pointer-events: auto;
}

#btn-centrar-pantalla img{
    width:20px;
    height:20px;
}

#placa-preview {
    width: 200px;
    height: 200px;

    background-color: rgb(255, 40, 40); /* rojo por defecto */

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    border-radius: 5px;
}

.beta-info {
    background: #502525;
    border: 1px dashed #777;
    border-radius: 5px;
    padding: 8px 10px;
    margin: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #ddd;
}

.beta-info strong {
    color: #fff;
}

.img-inicio{
    max-height: 100px;
}

.img-inicio-top{
    height: 90px;
}

#btn-presupuesto{
    background-color:#e02b20;
    font-weight: 500;
    color:#ffffff;
    height: 40px;
    border-radius: 5px;
    line-height: 15px;
    font-size: 12px;
}

#btn-presupuesto:hover{
    background-color:#ffffff;
    color:#404040;
}

.texto-exp{
    font-size: 12px;
    padding-left:10px;
    padding-right:10px;
    margin-top:5px;
}

.texto-exp a{
    color:#1e6bff;
}