diff --git a/css/comprobante.css b/css/comprobante.css new file mode 100644 index 0000000..bd3d2c1 --- /dev/null +++ b/css/comprobante.css @@ -0,0 +1,81 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background-color: #f5f5f5; +} +.container { + max-width: 800px; + margin: 0 auto; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} +h1, h2 { + color: #333; +} +.comprobante { + border: 1px solid #ddd; + padding: 20px; + border-radius: 4px; + margin: 20px 0; +} +.header { + border-bottom: 2px solid #333; + padding-bottom: 10px; + margin-bottom: 20px; +} +.info-venta { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} +.info-item { + margin-bottom: 10px; +} +.info-label { + font-weight: bold; +} +table { + width: 100%; + border-collapse: collapse; + margin-bottom: 20px; +} +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} +th { + background-color: #f8f9fa; +} +.total { + font-size: 18px; + font-weight: bold; + text-align: right; + margin-top: 20px; + padding-top: 10px; + border-top: 1px solid #ddd; +} +.acciones { + display: flex; + justify-content: space-between; + margin-top: 20px; +} +.btn { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + text-decoration: none; + cursor: pointer; + display: inline-block; +} +.btn-print { + background-color: #6c757d; +} +.btn:hover { + opacity: 0.9; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..2c00741 --- /dev/null +++ b/css/index.css @@ -0,0 +1,131 @@ + + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background-color: #f5f5f5; +} +.container { + max-width: 1200px; + margin: 0 auto; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} +h1, h2 { + color: #333; +} +.mensaje { + background-color: #f8d7da; + color: #721c24; + padding: 10px; + margin-bottom: 20px; + border-radius: 4px; + display: none; +} +.sala { + margin: 20px 0; + text-align: center; +} +.escenario { + background-color: #ddd; + padding: 10px; + margin-bottom: 30px; + border-radius: 4px; + text-align: center; + font-weight: bold; +} +.filas { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} +.fila { + display: flex; + gap: 10px; + align-items: center; +} +.numero-fila { + width: 30px; + text-align: center; + font-weight: bold; +} +.asientos { + display: flex; + gap: 5px; +} +.asiento { + width: 35px; + height: 35px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; + cursor: pointer; + user-select: none; + font-size: 12px; +} +.disponible { + background-color: #28a745; + color: white; +} +.vendido { + background-color: #dc3545; + color: white; + cursor: not-allowed; +} +.seleccionado { + background-color: #007bff; + color: white; +} +.form-group { + margin-bottom: 15px; +} +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} +input[type="text"] { + width: 100%; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + box-sizing: border-box; +} +.btn { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; +} +.btn:hover { + background-color: #0069d9; +} +.resumen { + margin-top: 20px; + padding: 15px; + background-color: #f8f9fa; + border-radius: 4px; +} +.leyenda { + display: flex; + gap: 15px; + margin-top: 20px; + justify-content: center; +} +.leyenda-item { + display: flex; + align-items: center; + gap: 5px; +} +.leyenda-color { + width: 20px; + height: 20px; + border-radius: 3px; +} \ No newline at end of file